This article describes the CSS transparent properties and background transparent inheritance solution hack, if you are using CSS transparent background such as this article can help you solve many incompatibility problems
Transparency often produces good web visuals, with CSS transparent code compatible with mainstream browsers:
The code is as follows:
. transparent_class {
Filter:alpha (OPACITY=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Several of the above properties are:
opacity:0.5; This is the most important because it is a CSS standard. This property supports Firefox, Safari, and Opera.
Filter:alpha (OPACITY=50); This is set for IE6, the value is 0-100, the other three 0 to 1.
-moz-opacity:0.5; This is to support some of the older versions of Mozilla browser.
-khtml-opacity:0.5; This is to support some of the older versions of the Safari browser.
CSS Transparency Inheritance Issues
However, the transparency property of CSS involves an inheritance problem, and when you set the transparency for a parent element, the child element automatically inherits its transparency, even if you specify a 1 opacity for the child element.
For child elements is the case of text, my solution is generally if you can see how much, regardless. Another tradeoff is to specify a relatively deeper color for the text element. In other words, when the child element inherits the transparency, the resulting text color is exactly what you want. The premise is that this color also has the possibility of deepening, and the need for detailed calculations of color and transparency values.
There is also the assertion that "elimination of transparency inheritance" is not very accurate, as far as I know, there is no way to abolish the transparency inheritance. It can only be said that when you want to implement "multiple element overrides, only allow the specified element to be transparent," some hack may be used.
Search, find a good way to achieve this effect-a question about the degree of transparency inheritance, interested friends can see. The principle is simple, add an empty element as a transparent layer, and the element that does not want to be transparent but implements the overlay effect is a sibling element. The parent element uses position:relative positioning; Two sub-elements use position:absolute positioning to achieve coverage.
HTML code:
The code is as follows:
There's no transparency in the text pictures.
Image
CSS Code
The code is as follows:
Body {
Background-image:url (./105247.png);
Background-repeat:repeat;
}
. p2{width:100px; height:100px; Background:url (./testbok.png)}
. p3{width:200px; height:200px; position:relative; margin-top:10px}
. p4{Position:absolute; top:0; height:200px; width:200px; z-index:-1; background: #FFFFFF; Filter:alpha (opacity=70); o pacity:0.7;}
If the height of the container outside of you is uncertain, then just set the height of the P3 to a sufficient height.
This method has a very bad disadvantage: more than a blank p
CSS Transparency Properties Detailed code _css/html
