Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.