CSS实现透明

香水坏坏 发表于 2007-8-8 [CSS]

CSS透明度的实现：

IE6+下：通过滤镜 filter:alpha(opacity=40);

FF1.5+,Opera9+下 opacity：0.4;

取值：{0.0,1.0}|inherit

1表示不透明

 Moz + FF 下：-moz-opacity:0.5;

避免CSS透明度继承：

IE下面，cnt层设了透明度，为了避免影响子层，父层position:static,子层position:relative;
FF下面，cnt层不设透明度，ft层设了透明度，并且让它放在内容下面并充满父层。

代码：

 

XML/HTML代码
  1. <div class="cnt">  
  2. <div class="bd">  
  3. content here<br/>  
  4. content here<br/>  
  5. content here<br/>  
  6. content here<br/>  
  7. content here<br/>  
  8. content here   
  9. </div>  
  10. <div class="ft"></div>  
  11. </div>  
CSS代码
  1. .cnt{   
  2.     width:45em;   
  3.     overflow:hidden; /*必须的，否则ft的透明层将会偏出*/  
  4.     color:#fff;   
  5.     position:absolute;/*根据需要设定，不是必须的*/  
  6.     filter:Alpha(opacity=20);/*IE下的透明度*/  
  7.     _background:#000;/*IE下的背景色*/  
  8.     _position:static;/*必须的*/  
  9. }   
  10.   
  11. .bd{   
  12.     position:relative;/*必须的，和父层的position:static对应*/  
  13. }   
  14.   
  15. .ft{　　/*FF下，做一个透明层，放在内容下面*/  
  16.     background:#000;   
  17.     position:absolute; /*必须*/  
  18.     top:0;/*必须*/  
  19.     left:0;/*必须*/  
  20.     rightright:0;/*必须*/  
  21.     bottombottom:0;/*必须*/  
  22.     z-index:-1;/*必须*/  
  23.     opacity:0.2;/*必须*/  
  24.     *opacity:1;　/*这个是为了应付其他浏览器*/  
  25.     *background:transparent; /*IE下是完全透明的*/  
  26. }   

PS：本文整理自网络

1650 2 
访客评论
  • Kenny    [2008-3-7]
    不错不错
  • bb    [2007-8-27]
    太好了 正是我想要的
FIRST1LAST
发表评论
  • 你的姓名：
  • 你的网站：
  •   EMAIL：   
  • 评论内容：
  • 私人