In newer browsers such as Ff/chrome, you can use the CSS properties Background-color Rgba to easily achieve background transparency, while text remains opaque. The Ie6/7/8 browser does not support RGBA, only the use of IE's exclusive filter filter:alpha to achieve, but this writing will also make the text transparent, so only in the transparent container child nodes (except the text node) set position: Relative can not inherit the transparent filter of its parent element, the code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>web Developer Network-www.admin10000.com</title>
<style type= "text/CSS ">
. Warp{ background: #eee url (back.jpg) no-repeat left top; width:440px;height:400px; &NBSP;BORDER:1PX Solid #CCC;}
. Content { width:180px; height:260px; margin:0px auto; padding:30px 30px; background:rgba (255, 255, 255, 0.6)!important;
filter:alpha (opacity=60); background: #fff; /* use IE filter to achieve transparent */ of IE background;}
. Content p{ } /* realize IE text opaque */
</STYLE>&NBSP;
</HEAD>&NBSP;
<body>
<div class= "warp" >
<div class= "Content" ><p> Admin10000.com is a web Developer Learning Communication Essentials website. Admin10000.com is a web Developer Learning Communication Essentials website. Admin10000.com is a web Developer Learning Communication Essentials website. Admin10000.com is a web Developer Learning Communication Essentials website. Admin10000.com is a web Developer Learning Communication Essentials website. Admin10000.com is a web Developer Learning Communication Essentials website. </p></div>
</div>
</body>
</html>
The above code is tested in Ie6.0+/ff3.0+/opera10+/chrome/safari
CSS for transparent background, text opaque (compatible with each browser)