<Br/> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> little magic produced </title> <br/> <style> <br/> body {Background: URL (http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 0 0 repeat ;}< br/> * {Marg In: 0; padding: 0;} <br/>. boxer {width: 600px; Height: 400px; overflow: hidden; margin: 0 auto; Border: 6px solid red ;}< br/>. opacity {<br/> Height: 400px; <br/> background-color: rgba (0.5, 0 ); /* The standard browser only needs this sentence */<br/> background-color: #000 \ 9;/* ie series */<br/> filter: alpha (opacity = 50);/* ie series */<br/>/* <br/> as a transparent background layer, the position attribute cannot be available. Why... <Br/>. <Br/> In the background-color: rgba (0.5, 0,) clause, IE6 seems to be able to read a small part. I did. Therefore, you can only write background-color: #000 after it, and then add a private hack of IE. <Br/> if you do not believe it, try it. <br/> background-color: #000; Background-color: rgba (0.5, 0,); filter: alpha (opacity = 50); <br/> IE6 will hurt you! <Br/> */<br/>}< br/>. boxerinner {position: relative;/* ie series */<br/> text-align: center; font-size: 24px; font-weight: 700; color: yellow ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <P style = "font-size: 60px; color: #000; text-align: center; padding: 20px; font-weight: 700; "> CSS: The ultimate method of transparent background color and opaque content! Compatibility, ultimate. </P> <br/> <Div class = "Boxer"> <br/> <Div class = "opacity"> <br/> <Div class = "boxerinner"> boxerinner </div> <br/> </body> <br/> </ptml> <br/>
RUN Code
