Transparency often produces good web visuals, first with CSS-transparent code compatible with mainstream browsers:
Copy Code code as follows:
. transparent_class {
Filter:alpha (OPACITY=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Several of the above attributes are:
opacity:0.5; This is the most important because it is CSS standard. This property supports Firefox, Safari and Opera.
Filter:alpha (OPACITY=50); This is for IE6, the value is 0-100, the other three 0 to 1.
-moz-opacity:0.5; This is to support some old versions of Mozilla browsers.
-khtml-opacity:0.5; This is to support some old versions of Safari browsers.
CSS Transparency Inheritance Issues
However, the transparent properties of CSS involve an inheritance problem, and when you set transparency for the parent element, the child automatically inherits its transparency, even if you specify 1 for the child element.
As for the child element is the text situation, my solution is generally if how many still can see, no matter. Another way to compromise is to specify a darker color for the text-book element. In other words, when the child element inherits transparency, the resulting text color is exactly what you want. The premise is that there is a possibility for this color to deepen, and a value that requires detailed calculation of color and transparency.
There is also the assertion that "the abolition of transparency inheritance" is not very accurate and, as far as I know, there is no way to remove the transparency inheritance. You can only say that when you want to implement "multiple element overrides, only the specified element is transparent," some of the hack are available.
Search, find a good way to achieve this effect-a question about transparency inheritance, interested friends can see. The principle is simple, adding an empty element as a transparent layer, and an element that does not want to be transparent but implements the overlay effect as a sibling element. The parent element uses position:relative positioning; Two child elements use Position:absolute positioning to implement overrides.
HTML code:
Copy Code code as follows:
<div class= "Div3" ><div class= "Div4" ></div> there's no transparency in the text picture.
<div class= "Div2" > Pictures </div>
</div>
CSS Code
Copy Code code as follows:
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 your outer container is highly variable, just set the height of the div3 to a high enough height.
This method has a very bad disadvantage: a more blank div
