Detailed explanation of CSS transparency property (code)

this article introduces a detailed explanation of css transparent properties and a hack for solving background transparency inheritance. if you are using css transparent background, this article can help you solve many incompatibility problems

transparency can often cause good web page visual effects, first provide the 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;
}

the above attributes they 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, and the possible values ​​are 0-100, and the other three are 0 to 1.

-moz-opacity:0.5; this is to support some older versions of the mozilla browser.

-khtml-opacity: 0.5; this is to support some older versions of safari browser.

css transparency inheritance problem:

the transparent property of css involves an inheritance problem. when transparency is set for the parent element, the child element will automatically inherit its transparency, even if you set the transparency for the parent element. specifying a transparency of 1 for a child element is also invalid.

for the case where the sub-element is text, my solution is generally to leave it alone as long as it is still visible. another compromise is to assign a relatively darker color to the text sub-element. in other words, when the child element inherits transparency, the resulting text color is exactly what you want. the premise is that this color still has the possibility of deepening, and the color and transparency values ​​need to be calculated in detail.

there is also the saying of "cancel transparency inheritance", which is not very accurate. as far as i know personally, there is no way to cancel transparency inheritance. it can only be said that when you want to achieve "multiple elements covering, only make the specified elements transparent", there are some hacks that can be used.

after searching, i found a good way to achieve this effect - a question about transparent inheritance. friends who are interested can take a look. the principle is very simple, add an empty element as a transparent layer, and the element that does not want to be transparent but needs to achieve a covering effect is a sibling element. the parent element is positioned using position:relative; the two child elements are positioned using position:absolute to achieve coverage.

the html code is as follows:

<p class="p3"><p class="p4"></p>这里文字图片都没透明度了 
<p class="p2">图片</p> 
</p>

the css 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);opacity:0.7;}

if the height of your outside container is variable, then just set the height of p3 to enough the height is enough.
this method has a very bad shortcoming: there is an extra blank p.

the above is the detailed content of detailed explanation of css transparent properties (code). for more information, please pay attention to other related articles on the php chinese website!