[技巧心得] 背景半透明最佳实践

rgba色彩 + Gradient Filter

其实我们可以选用 background-color: rgba() 来实现，同样可以实现透明效果，并且

只应用于当前元素，不继承。而 IE 的 filter 有很多滤镜效果。其中的渐变滤镜，只要

变通一下，就可以实现我们想要的效果，并且这个滤镜不会被下级元素继承，这样元素

的内容就不会被虚化。代码如下：

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

复制代码

不过，我们得到的效果是这样的，IE9 的透明度竟然有 60%!! 这显然不是我们想法

的。原因是：IE9 也支持 filter，使得 filter 的结果和 background-color 叠加，所以

是 60%。具体参见 DEMO 和示例图:


那么我们可以利用 IE 的 HACK，单独把 IE9 的 filter 变成透明度为 0 即可。高级浏

览器大部分支持 :root 伪类，但不支持 filter 属性，而 IE 只有 IE9 支持，所以我们可

以这样写。代码如下：

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

复制代码

当然，第二种方法可以应用于 background，也可应用于 border 上。整体的代码可参