CSS set background translucent, text not translucent

Now many sites like to use the translucent effect to display content, so that people look very comfortable, not like the real color background looks so thick, but we write the effect of the time is to hope that the translucent only in the background, so after testing, summed up a few of the background translucent, and the text is not translucent effect, welcome guidance and supplement ~ ~

Method One:

Previously used, translucent layer and the text layer separation, with a separate label to display the translucent layer, so that the text layer and translucent layer does not affect each other, but the bad is to add the label

<style type= "text/css" >.opacity01 div,. opacity01 span{width:100%;Height:100%;}. Opacity01{width:200px;Height:24px;Line-height:24px;text-align:Center;position:relative;Border:1px solid #ccc;}. Opacity01 Div{background:#FFF;Opacity:0.5;/*Non-IE*/Filter:Alpha (OPACITY=50);/*IE*/}. Opacity01 span{position:Absolute;Top:0; Left:0;Z-index:1;Color:#000;}</style><div class= "Opacity01" ><div></div><span> method One: Translucent text </span></ Div>

Method Two:

It is recommended to use this, the code is relatively concise

<style type= "Text/css" >.opacity02{width:200px;Height:24px;Line-height:24px;text-align:Center;Border:1px solid #ccc;Color:#000;background:#FFF;background:Rgba (255,255,255,0.5);/*Non-IE678*/Filter:Alpha (OPACITY=50);/*IE789*/}/** Because Rgba and filter will be in effect on IE9, but the effect is not overlay, but overlay * so IE9 on the effect will be doubled, so also to give IE9 again to remove the effect*/: root. opacity02{Filter:Alpha (opacity=100);}. opacity02 span{position:relative;}</style><!--<div class= "opacity02" > method Two: Translucent text </div>--<!--IE678 fonts are translucent--><d IV class= "OPACITY02" ><span> method Two: Translucent text </span></div>

Method Three:

Use the filter method to make IE support translucent, but the filter code is difficult to remember, and complex, not recommended

<style type= "Text/css" >.opacity03{width:200px;Height:24px;Line-height:24px;text-align:Center;Border:1px solid #ccc;Color:#000;background:Rgba (255,255,255,0.5)!important;/*Non-IE6*/Filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, startcolorstr= ' #80FFFFFF ', endcolorstr= ' #80FFFFFF ');/*IE*/}/** 08FFFFFF FFFFFF is a color value, 08 is calculated after a hexadecimal value of * 08 calculation method will be rounded after the 255* translucent value converted to 16 after the result * because both methods support IE9, so also to IE9 separate settings*/: root. opacity03{Filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, startcolorstr= ' #00FFFFFF ', endcolorstr= ' #00FFFFFF ');}</style><div class= "Opacity03" > method Three: Translucent text </div>

Final effect:

CSS set background translucent, text not translucent