Compatible with CSS Transparent Code of mainstream browsers and mainstream css

Compatible with CSS Transparent Code of mainstream browsers and mainstream css

Transparency often produces good web page visual effects. The following is the CSS Transparent Code compatible with mainstream browsers.
Transparent_class {

Filter: alpha (opacity = 50 );

-Moz-opacity: 0.5;

-Khtml-opacity: 0.5;

Opacity: 0.5;

}

Filter: alpha (opacity = 50): This is set for IE6. The value ranges from 0 to 100, and the other three are 0 to 1.
-Moz-opacity: 0.5; To support earlier Mozilla browsers.
-Khtml-opacity: 0.5; to support some older versions of Safari browsers.
Opacity: 0.5; this is the most important because it is the CSS standard. This attribute supports firefox, Safari, and Opera.


CSS transparency inheritance
For example


However, the transparency attribute of CSS involves an inheritance problem. When transparency is set for the parent element, the child element automatically inherits its transparency.
Even if you specify a transparency of 1 for the child element, it is invalid.

If the child element is text
Three solutions.
1. If you can, you can ignore it for the moment.
2. Specify a relatively deeper color for the text book element. That is to say, when the child element inherits transparency, the text color is exactly what you want.
The premise is that the color may be deepened, and the color and transparency values need to be calculated in detail.
3. Set each layer for the transparency effect and text separately, that is, create a layer for the transparency. Then the text layer is covered.
Let's look at the code.