CSS3 opacity property (transparency effect)

 The function of the CSS3 opacity property is to control the transparency effect of web elements (adjust the opacity). Early web design often used many transparency effects, usually through the png layer to create a transparent feeling, now web designers can use CSS3 opacity property can easily adjust the opacity of web page elements. The syntax of CSS3 opacity property is very simple. You only need to adjust the number to show different opacity, and then design a quite modern web page style. Applied to elements such as webpage pictures, DIV blocks, span areas, Table tables ..., all new versions of mainstream browsers support the effect of CSS3 opacity property.

Basic syntax of CSS3 opacity property

opacity: opacity;

The "opacity" of the CSS3 opacity property parameter is represented by a number, from 0.0 to 1.0. Full transparency is 0.0, and full opacity is 1.0. In other words, the larger the number, the more opaque the element is. In addition to using the "opacity" parameter, there is also inherit to inherit the properties of the parent layer, but the browser support is poor and it is not recommended.

CSS3 opacity property practical example

<div style="padding:10px;background-color:green;opacity:0.1;">
Test the opacity handling of the CSS3 opacity property
</div>
<div style="padding:10px;background-color:green;opacity: 0.5;">
Test the opacity handling of the CSS3 opacity property
</div>
<div style="padding:10px;background-color:green;opacity:0.8;">
Test the opacity handling of the CSS3 opacity property
</div>

Example output effect

Test the opacity handling of the CSS3 opacity property

Test the opacity handling of the CSS3 opacity property

Test the opacity handling of the CSS3 opacity property

The example prepares a total of three DIV blocks with opacity effect . You can notice that the first block from the top has an opacity of 0.1 (opacity: 0.1), so the entire block becomes almost impossible to see the color and For text, the opacity of the second block is set to 0.5 (opacity:0.5), so it is much clearer than the first block. The third block reduces the opacity to 0.8 again, and the text and background colors are more obvious. This is the actual effect of the CSS3 opacity property. It can be clearly seen from the example that the text content and background-color of a DIV block will be affected by the opacity of the opacity property. Supplement: The current new version of mainstream browsers all support the CSS3 opacity attribute, but it should be noted that IE8 and earlier versions of IE browsers must use alternative syntax to implement it. The so-called alternative syntax is to use the filter attribute, written as " filter:Alpha(opacity=50);", the effect is equal to "opacity:0.5". ➤ The CSS3 opacity opacity effects applied skills in the pictures, see: CSS3 Image Opacity picture transparency .