How to set transparency in CSS styles
Editor to share with you how to set the transparency in the CSS style, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Opacity attribute
Opacity:value | inherit
Value: used to set opacity. From 0.0 (fully transparent) to 1.0 (completely opaque)
Inherit: the value of the opacity attribute should be inherited from the parent element
Example:
Set the picture to opaque
Transparency is not set:
Transparency is set:
The effect picture is as follows:
Note:
Use the property opacity in the IE9,Firefox,Chrome,Opera browser to set transparency. The opacity property can be set from 0. 0 to 1. 0. The smaller the value, the more transparent it is.
IE8 and earlier versions use the filter filter:alpha (opacity=x), and x can take values from 0 to 100. The smaller the value, the more transparent it is.
Case sharing
Use the opacity property to make a looming downward arrow
In this case, you need to use the animation animation attribute in CSS3, and set the value of the animation attribute to specify the time of execution of the animation and the design of the change in transparency during the animation.
.box
{- webkit-animation:box5sinfinite
-webkit-animation-fill-mode:both
}
@-webkit-keyframesbox
{
From
{
Opacity:0
}
To
{
Opacity:1
}
}
The above is all the content of the article "how to set transparency in CSS style". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
