Introduction to using CSS3 's Opacity property to set the transparency effect

This article mainly introduces the use of the Opacity property setting transparency effect in detail CSS3, and also discusses the problem of the inheritance affecting subset elements of opacity transparency, which is worth the attention of beginners, the need of friends can refer to the following

The functionality of the CSS3 opacity property is used to control the transparency of page elements (to adjust opacity), and early web design often uses a lot of transparency, often using PNG layers to create a sense of transparency, and now web designers can use CSS3 opacity Properties to easily achieve the page element opacity adjustment, CSS3 opacity property syntax is very simple, only need to through the digital adjustment, can show a different opacity, and then design a quite modern page style, can be applied in the page image, p block, span area, table table ... and other elements, all new versions of the mainstream browser support the CSS3 opacity attribute effect.

CSS3 Opacity Property Basic syntax
Opacity: opacity;
The "opacity" of the CSS3 opacity attribute parameter is expressed as a number, from 0.0 to 1.0, full transparency is 0.0, full opacity is 1.0, in other words, the larger the number, the more opaque the element. Parameters in addition to the use of "opacity", there are inherit inherit the parent layer properties, but the browser support is poor, not recommended.

CSS3 Opacity Property Actual example

<p style= "padding:10px;background-color:green;opacity:0.1;" >   Test CSS3 Opacity Property opacity handling   </p>   <p style= "padding:10px;background-color:green;opacity:0.5 ;" >   Test CSS3 Opacity Property opacity handling   </p>   <p style= "padding:10px;background-color:green;opacity:0.8 ;" >   testing opacity handling of CSS3 opacity properties   </p>

Examples of output effects

Sample has prepared three to add the opacity effect of P block, you can notice from the top of the first block, the opacity of 0.1 (opacity:0.1) so the whole block into almost no color and text, the second block opacity is set to 0.5 (opacity:0. 5), so more clear than the first block, the third block again reduced opacity to 0.8, the text and background color is more obvious, this is the actual effect of the CSS3 opacity attribute, from the example can be very clearly seen, a P The text content and background color (background-color) within a chunk are affected by the opacity of the Opacity property.

Add: The current version of the mainstream browser supports the CSS3 opacity property, but it is important to note that the earlier version of IE browser must use the alternative syntax to do, the so-called alternative syntax is to use the Filter property, such as "filter:alpha (opacity= 50); ", the effect equals"opacity:0.5".

Opacity inheritance issues for transparency properties
The opacity transparency property of CSS3 is inherited, and its subset elements have a transparency effect when the opacity transparency attribute is set on an object;

<p class= "main" >  <p class= "P1" >    <p> background color for RGB opacity effects </p>  </p> <  P class= "P2" >    <p> Transparent effect of the background color for Rgba </p>  </p></p>

Css:

. main{     Clear:rightright;     margin:20% Auto;     Overflow:hidden;     width:335px;   }   . Main p{     color:red;     Float:left;     Display:inline-block;     width:160px;     height:160px;     Text-align:center;   }   /* Use opacity transparent properties to display the effect */.p1{background-color:rgb (0,0,0);     opacity:0.5;     Filter:alpha (opacity=50);     -ms-filter: ' Progid:DXImageTransform.Microsoft.Alpha (opacity=50) '; margin-right:15px;   }   . P1 p{     position:relative;   }   /* Effects with RGBA color display */.p2{     Background:rgba (0,0,0,.5)   }

Summary: The background color of RGBA can be used to set the transparency effect of an object very directly, and there is no inheritance for its subset elements, whereas an object that uses an RGB color and sets the opacity transparency property produces transparency inheritance.

However, if you copy the entire code and test it in a browser below IE9, you will find that the subset elements in the IE7, IE8 browser that have the set opacity transparency attribute in the object do not inherit the transparency effect of the parent set element. The object with the background color set to RGBA has no effect. This is because the Position:relative attribute is set in the subset element in the object that has the opacity transparency property set, which makes it resolved in browsers below IE9, followed by browsers below IE9 are not compatible with RGBA color, so You will see that the second background color has no effect.