CSS changes background transparency "go"

Transparency often produces good web visuals, with CSS transparent code compatible with mainstream browsers:

. 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

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, which makes it invalid for you to specify a transparency of 1 for the child element.

The first method is to specify a relatively deeper color for the text book 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.

The second method – a question about the degree of transparency inheritance . 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.

Example code:

HTML code:

2. <div class="Div3″><div class=" Div4″></div> There's no transparency in the text pictures.
4. <div class="Div2″> Picture </div>
6. </div>

CSS Code:

2. Body {
4. background-image: url (http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);
6. background-repeat: repeat;
8. }
10. . div2{ Width:100px; height:100px; background: URL (http://www.css88.com/images/testbok.png)}
12. . div3{ Width:200px; height:200px; position:relative; margin-top:10px}
14. . div4{ Position:absolute; top:0; height:200px; width:200px; z-index:-1;  background:#FFFFFF; Filter:alpha (opacity=70); opacity:0.7;}

"Reprint" http://blog.sina.com.cn/s/blog_66e0d37601015ncl.html

CSS changes background transparency "go"