IE, Firefox, and opera browsers support CSS to implement Alpha translucent

1. Use filter for IE and PNG background image for non-ie browsers

See the followingCode:

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. It is actually a percentage, but note that, in IE, haslayout must be triggered to make its private property take effect. For example, to set the container width, the most common solution is {ZOOM: 1 }.).

You have not seen opera from the code above. That's right. Since opera9, opacity of css3 is supported, and there is no private attribute that supports 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.

Example:Http://www.omemo.net/neo/lab/alpha/

The key lies in:

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.

This part of content comes from:Http://www.omemo.net/neo/blog? P = 87

2. If you want to make the parent label transparent, but the child label is not transparent, there is no problem when using the PNG transparent parent label. If the Alpha value is used, whether it is IE or not, there is such a problem, CSS declares that the content contained in the position transparent tag is transparent.

For example:

<Div id = "out"> <Div id = "in"> opacity <div>
Out{
Position :Absolute;
Top :0;
Left :0;
Width :100%;
Background :URL (../img/alpha30.png);/*Non-ie*/
Filter :Alpha (opacity = 30);/*IE*/
}
In {
Background : # Fff
}

 

At this time, we can see that in is also transparent.

Hack method: add a sub-tag and use CSS hack to fill it with the entire parent tag in IE and make it transparent. Because the transparent part and the opaque part are sibling, This is not affected.

<Div id = "out"> <Div id = "in"> opacity <div> <Div id = "ie"> opacity <div>
Out{
Position :Absolute;
Top :0;
Left :0;
Width :100%;
Background :URL (../img/alpha30.png);
Z-Index :100;
}
In {
Background : # Fff
}

* HTML out {
Background :Out;
}
* HTML IE {
Position :Absolute;
Top :0;
Left :0;
Width :100%;
Height :100%;
Background :URL (../img/alpha30.png);
Filter :Alpha (opacity = 30);
Z-Index :-1;/*Place it below the in*/
}

 The idea comes from http://www.webmasterworld.com/forum83/3529.htm