CSS+HTML 订阅所有【CSS+HTML】的日志

层的半透明实现方案

作者:rainweb 日期:2011-10-31

字体大小: 小 中 大

一、使用 opacity + Alpha Filter

看起来手挺简单的吧？嗯。挺简单的… 希望你能很方便实现这个方案！其实见到这个的时候，我们的第一想法当然是 background + opacity，在不支持 opacity 的 IE 使用 filter 的 alpha 滤镜来实现。然后，我们得到这样的效果：

 

 

 

CSS代码
  1. .opacity{  
  2.     background:#000;  
  3.     opacity:0.3;  
  4.     filter: alpha(opacity=30);  
  5. }  

 

无一例外，最外层，最内层和文字，都被设置了 opacity（alpha 也是使用 opacity ） 。当然，我们可以给各层设置 opacity 变回来。但这是多麻烦的事(不信试一下)。

二、最佳实践：rgba色彩 + Gradient Filter

其实我们可以选用 background-color: rgba() 来实现，同样可以实现透明效果，并且只应用于当前元素，不继承。而 IE 的 filter 有很多滤镜效果。其中的渐变滤镜，只要变通一下，就可以实现我们想要的效果，并且这个滤镜不会被下级元素继承，这样元素的内容就不会被虚化。代码如下：

CSS代码
  1. /* 
  2.  * filter 渐变滤镜详细用法，[参见这里] 
  3.  * StartColorStr 和 EndColorStr: 
  4.  *    #4c000000 是 30% 透明度的 #000000 的意思 
  5.  *    组成: # + 透明度 + 颜色 
  6.  *    算法: Math.floor(0.6 * 255).toString(16); 
  7.  */  
  8. .rgba{  
  9.     background:rgba(0, 0, 0, 0.3);  
  10.     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');  
  11. }  

 不过，我们得到的效果是这样的，IE9 的透明度竟然有 60%!! 这显然不是我们想法的。原因是：IE9 也支持 filter，使得 filter 的结果和 background-color 叠加，所以是 60%。具体参见 DEMO 和示例图:

那么我们可以利用IE HACK，单独把 IE9 的 filter 变成透明度为 0 即可。高级浏览器大部分支持 :root 伪类，但不支持 filter 属性，而 IE 只有 IE9 支持，所以我们可以这样写。代码如下：

CSS代码
  1. :root .rgba{    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');  
  2. }  

 当然，第二种方法可以应用于 background，也可应用于 border 上。

整体的代码可参见DEMO。

 

 




[本日志由 rainweb 于 2011-10-31 04:58 PM 编辑]
文章来自: 转载
引用通告: 查看所有引用 | 我要引用此文章
Tags: 半透明
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.