用CSS控制网页背景透明度

如何用CSS控制网页背景透明度？这篇文章里我们用一般的思路进行：作两个层，一个用于放文字，另一个用于做透明背景（使用滤镜）。

IE下的实现方法：

1. HTML代码：
   
2. <div class="alpha1">
   
3.    <div class="ap2">
   
4.        <p>背景为红色(#FF0000)，透明度20%。</p>
   
5.    </div>
   
6. </div>
   
7. 
   
8. CSS代码：
   
9. .alpha1{
   
10.      width:300px;
    
11.      height:200px;
    
12.      background-color:#FF0000;
    
13.      filter: Alpha(Opacity=30);
    
14. }
    
15. .ap2{
    
16.      position:relative;
    
17. }
    

复制代码

这样基本就可以实现啦，也不用担心定位和自适应问题，最大的问题是仅IE支持。
如果兼容FF、OP怎么写呢？首先，上面这种定法是不行的啦，那就只能用两个层重叠的方法啦。
改下页面结构与CSS样式：
HTML代码：

1. <div class="alpha1">
   
2.    <div class="ap2">
   
3.        <p>背景为红色(#FF0000)，透明度20%。</p>
   
4.    </div>
   
5.    <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
   
6. </div>
   
7. 
   
8. CSS代码：
   
9. .alpha1,.alpha2{
   
10.      width:100%;
    
11.      height:auto;
    
12.      min-height:250px;
    
13.      _height:250px;
    
14.      overflow:hidden;
    
15.      background-color:#FF0000;
    
16. }
    
17. .alpha1{
    
18.      filter:alpha(opacity=20);
    
19. }
    
20. .alpha2{
    
21.      background-color:#FFFFFF;
    
22.      -moz-opacity:0.8;
    
23.      opacity: 0.8;
    
24. }
    
25. .ap2{
    
26.      position:absolute;
    
27. }

复制代码

多谢楼主分享

花纸系话 发表于 2012-7-20 17:18
多谢楼主分享