CSS transparent attributes explanation and background transparent inheritance solution hack

Transparency often produces good web page visual effects. First, we provide CSS transparent code compatible with mainstream browsers:

The code is as follows:	Copy code
. Transparent_class { Filter: alpha (opacity = 50 ); -Moz-opacity: 0.5; -Khtml-opacity: 0.5; Opacity: 0.5; }

The preceding attributes are as follows:

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

CSS transparency inheritance

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 transparency as 1 for the child element, it is invalid.

When the sub-element is text, my solution is to check the number of sub-elements, regardless of the number of sub-elements. Another compromise is to 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.

There is also a saying "discontinuing transparency", which is not accurate. As far as I know, there is no way to cancel transparency inheritance. It can only be said that some Hack can be used when you want to "overwrite multiple elements and make the specified elements transparent.

After searching, find a good method to achieve this effect-a question about transparency Inheritance. If you are interested, you can check it out. The principle is very simple. Adding an empty element as a transparent layer is similar to the element that does not want to be transparent but needs to be overwritten. The parent element uses position: relative to locate, and the two child elements use position: absolute to locate and overwrite.

For example:
Html code:

The code is as follows:	Copy code
<Div class = "div3"> <div class = "div4"> </div> The text and image are not transparent. <Div class = "div2"> Image </div> </Div>

CSS code

The code is as follows:	Copy code
Body { Background-image: url (./105247.png ); Background-repeat: repeat; } . Div2 {width: 100px; height: 100px; background: url (./testbok.png )} . Div3 {width: 200px; height: 200px; position: relative; margin-top: 10px} . Div4 {position: absolute; top: 0; height: 200px; width: 200px; z-index:-1; background: # FFFFFF; filter: alpha (opacity = 70 ); opacity: 0.7 ;}

If the height of the container outside you is unstable, you only need to set enough height for div3.

This method has a bad disadvantage: an empty div is added.