Detailed explanation of ccs transparent attribute and background transparent inheritance method examples

Transparency can often produce good web page visual effects. First, let me introduce the CSS transparency code that is compatible with mainstream browsers:

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

The above attributes 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 value is 0-100 , 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 Issue
However, the transparent attribute of CSS involves an inheritance issue. When transparency is set for a parent element, the child element will automatically inherit its transparency. Even if you specify a transparency of 1 for the child element, it will be invalid. of.
For the case where the sub-element is text, the solution is generally to leave it alone as long as it can still be seen clearly. 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 has the possibility of deepening, and the color and transparency values ​​need to be calculated in detail.
There is also the statement "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", you can use some Hacks.
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.
html code:

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

CSS code

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 a sufficient height.
This The method has a very bad shortcoming: there is an extra blank p

The above is the detailed content of Detailed explanation of ccs transparent attribute and background transparent inheritance method examples. For more information, please follow other related articles on the PHP Chinese website!