The initial error, the content will be affected by the background transparency changes:
Code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Div{width:300px;Height:300px;margin:50px Auto;Line-height:300px;text-align:Center;background:Red;Color:#000;font-size:30px;-webkit-opacity:0.2; } </style></Head><Body> <Div class= "wrap">I love summer .</Div></Body></HTML>
Workaround One:
Add a div inside the div.wrap. As a mask, set the change style of transparency to it, and make the content absolutely positioned relative to wrap, remember to set the relative positioning for wrap!!
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>. Wrap{width:300px;Height:300px;margin:50px Auto;position:relative; }. Con{width:300px;Height:300px;background:Red;-webkit-opacity:0.2; }span{position:Absolute;Top:150px; Left:100px;font-size:30px;Color:#000; } </style></Head><Body> <Divclass= "Wrap"> <Divclass= "Con"></Div> <span>I love summer.</span> </Div></Body></HTML>
Final effect:
Workaround Two:
Set the background color and transparency style of the background with RGBA ().
<style>Div{width:300px;Height:300px;margin:50px Auto;Line-height:300px;text-align:Center;background:Rgba (250,18,18,0.2);Color:#000;font-size:30px; } </style>
Final effect:
It is obvious that using CSS3 's Rgba () is much more convenient, saves a lot of code, and the document structure is clearer, but the compatibility of RGBA () also makes people headache:
Finally, a compatibility workaround is given:
. rgba { Background:rgb (0,0,0);/*the Fallback color, here you can also use a picture instead of * /Background:rgba (0, 0, 0,0.5); -ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=1,startcolorstr= #80000000, endcolorstr=# 80000000) "; /*filter for IE8 * /filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=1,startcolorstr= #80000000, Endcolorstr= #80000000); /*filter for older IEs */}
Daily CSS Tips Summary (1)--background transparency changes have no effect on content