本文向大家介绍一下如何CSS实现背景半透明效果，传统的方法是用两个层，一个用于放文字，另一个用于做透明背景，这里向大家描述一种更为简单的方法，相信你一定会感兴趣的。
DIV CSS实例：如何用CSS实现背景半透明效果
如何用CSS实现背景半透明效果？做过活动页面的同学可能会碰到要做背景半透明的效果，我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。不过假如你只需求在IE下实现，我们有更简单的做法：
HTML代码：
ExampleSourceCode
复制
<divclassdivclass="alpha1"> <divclassdivclass="ap2"> <p>背景为红色(#FF0000)，透明度20%。</p> </div> </div>
1.
2.
3.
4.
5.
6.
CSS代码：
ExampleSourceCode
复制
.alpha1{ width:300px; height:200px; background-color:#FF0000; filter:Alpha(Opacity=30); } .ap2{ position:relative; }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
这样基本就可以实现啦，也不用担心定位和自适应问题，最大的问题是仅IE支持。
假如兼容FF、OP怎么写呢？首先，上面这种定法是不行的啦，那就只能用两个层重叠的方法啦。
改下页面结构与CSS样式：
HTML代码：
ExampleSourceCode
复制
<divclassdivclass="alpha1"> <divclassdivclass="ap2"> <p>背景为红色(#FF0000)，透明度20%。</p> </div> <!--[ifIE]><![if!IE]><![endif]--><divclassdivclass="alpha2"> </div><!--[ifIE]><![endif]><![endif]--> </div>
1.
2.
3.
4.
5.
6.
7.
8.
CSS代码：
ExampleSourceCode
复制
.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;/*MozFF透明度20%*/ opacity:0.8;/*支持CSS3的浏览器（FF1.5也支持）透明度20%*/ } .ap2{ position:absolute; }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
【编辑推荐】