Realization of background translucent effect with CSS

How to use CSS to achieve background translucent effect? The students who have done the activity page may encounter the effect of having to do the background translucent, our general practice is to use two layers, one for the text, the other for transparent background, because the effect of the transparent filter will affect the contents of the inside. But if you only need to implement it under IE, we have a simpler approach:

HTML code:

<div class="alpha1">
　<div class="ap2">
　　　<p>背景为红色(#FF0000)，透明度20%。</p>
　</div>
</div>

CSS code:

.alpha1{
　　width:300px;
　　height:200px;
　　background-color:#FF0000;
　　filter: Alpha(Opacity=30);
}
.ap2{
　　position:relative;
}

This basically can be achieved, also do not worry about positioning and adaptive problems, the biggest problem is IE support only.

If you are compatible with FF, op How to write it? First of all, the above method is not good, it can only use two layers of overlapping methods.

Change the page structure and CSS style:

HTML code:

<div class="alpha1">
　<div class="ap2">
　　　<p>背景为红色(#FF0000)，透明度20%。</p>
　</div>
　<!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
</div>

CSS code:

　　
.alpha1,.alpha2{
　　width:100%;
　　height:auto;
　　min-height:250px;/* 必需 */
　　_height:250px;/* 必需 */
　　overflow:hidden;
　　background-color:#FF0000;/* 背景色 */
}
.alpha1{
　　filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
　　background-color:#FFFFFF;
　　-moz-opacity:0.8; /* Moz + FF 透明度20%*/
　　opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/
}
.ap2{
　　position:absolute;
}