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:
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "> 2 <HTMLxmlns= "http://www.w3.org/1999/xhtml"> 3 <Head> 4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> 5 <title>Web Developer Network-www.admin10000.com</title> 6 <styletype= "Text/css">7 . Warp{background:#eee URL (back.jpg) no-repeat left top;width:440px;Height:400px;Border:1px solid #ccc;}8 . Content{width:180px;Height:260px;margin:0px Auto;padding:30px 30px;background:Rgba (255, 255, 255, 0.6)!important;9 Filter:Alpha (opacity=60);background:#fff; /*use IE-specific filters for IE background transparency*/ }Ten . Content P{position:relative;} /*realize IE text opaque*/ One </style> A </Head> - <Body> - <Divclass= "Warp"> the <Divclass= "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)