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

This article mainly shows you the "css opacity opacity attribute example analysis", the content is easy to understand, clear, hope to help you solve the doubt, the following let Xiaobian lead you to study and learn "css opacity opacity attribute example analysis" this article.

1. Opacity attribute

1 、 opacity

It is customary to say "transparency". In fact, it should be called "opacity". Opacity means opaque, while the default value for background color: transparent means "transparent". So opacity is used to set opacity from [0.01mm 1.0], which means that from completely transparent to completely opaque, 0.0 is the same as transparent, invisible but real.

Default value: 1, completely opaque.

Inherited: inherits by default. So when you set opacity to the parent element, all child elements also inherit the opacity attribute.

Div {

Background-color:red

}

.opacity {

Opacity:0.5

}

-

Both text and background colors are affected by the level of opacity.

Both text and background colors are affected by the level of opacity.

Effect picture:

1.png

All browsers support the opacity attribute, and IE8 and earlier versions support the alternative filter attribute.

Filter:alpha (opacity=number), with a value of [0,100] in number, 0 is completely transparent and 100 is opaque.

So for compatibility, it can be written as:

.opacity {

Opacity:0.5

Filter:alpha (opacity=50)

}

2. Set opacity for child elements

The parent element sets opacity, and the child element also sets opacity. The opacity set by the child element under IE does not work. Under ff and Chrome, the child element is the final opacity= parent element opacity* child element opacity.

This explains why when the parent element sets the opacity, the child element sets the opacity to 1 [that is, completely opaque] but does not take effect.

Example:

Transparency bystarof

Div {

Background-color:red

}

.opacity {

Opacity:0.5

}

.sonOpacity {

Opacity:0.3

}

Do not set opacity effect

Parent element (div) sets the opacity:0.5 effect

The parent element (div) sets the opacity:0.5 while the child element (p) sets the opacity:0.3 effect

The above is all the content of the article "sample Analysis of css opacity opacity attributes". 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.