Today we will learn about CSS Alpha transparency together.
Related knowledge about CSS Alpha transparency. First, please look at the following code:
filter:alpha(opacity =50); /* IE */
-moz-opacity:0.5; /* Moz FF */
opacity: 0.5; /* Browsers that support CSS3 (FF 1.5 also supports)*/
Simple explanation, IE uses the private attribute filter:alpha(opacity), Moz Family uses the private attribute -moz-opacity, and the standard attribute is opacity (CSS 3, Moz Family partially supports CSS3). The following value is transparency, use percentage or decimal (alpha (opacity)). Use a value greater than 0 and less than 100, which is actually a percentage).
From the above code you don’t see Opera. That's right, Opera doesn't yet support standard opacity, nor does it have its own private properties to support Alpha transparency.
However, we know that Opera supports Alpha transparent PNG images (of course Moz Family also supports it). So we can use a background image to achieve Alpha transparency.
The key is:
background: transparent url(alpha80.png) left top repeat!important;
background:#ccc;
filter:alpha(opacity=50);
Since Moz Family supports Alpha transparency PNG, so we don't need to use its private properties. Of course, you can use standard opacity, but don't use an alpha transparent image and opacity at the same time, otherwise it becomes a mixture of the two. You can download the above example and look at the comments of /*opacity:.5;*/.