The transparent effect of images is a special form used in Web pages. Although they are not very common, they are often caught off guard when encountering such a requirement. Today we will learn about CSS Alpha transparency.
Knowledge about CSS Alpha transparency. See the following code first:
The Code is as follows:
Filter: alpha (opacity = 50);/* IE */
-Moz-opacity: 0.5;/* Moz + FF */
Opacity: 0.5;/* supports CSS3 browsers (FF 1.5 is also supported )*/
Internet Explorer uses the private attribute filter: alpha (opacity), Moz Family uses the Private Attribute-moz-opacity, and the standard attribute is opacity (CSS 3, the Moz Family part supports CSS3 ). The following value is transparency. The percentage or decimal number (alpha (opacity) is used to use a value greater than 0 and less than 100, which is actually a percentage ).
You have not seen Opera from the code above. Yes, Opera does not yet support standard opacity, nor does it have private attributes that support Alpha transparency.
However, we know that Opera supports Alpha-transparent PNG images (also supported by Moz Family ). Therefore, we can use background images to achieve Alpha transparency.
The key lies in:
The Code is as follows:
Background: transparent url(alpha80.png) left top repeat! Important;
Background: # ccc;
Filter: alpha (opacity = 50 );
Since Moz Family supports Alpha-transparent PNG, we do not need to use its private attributes. Of course, you can use the standard opacity, but do not use the Alpha transparent image and opacity at the same time. In this way, the two are mixed. You can download the example above, and then/* opacity:. 5; */to see the annotations.
