css 背景半透明最佳实践

用各种浏览器打开狼蚁网站SEO优化这个 DEMO, IE9 有特殊显示

一、使用 opacity + Alpha Filter


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

.opacity{
    background:#000;
    opacity:0.3;
    filter: alpha(opacity=30);
}

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

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


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

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

参考文献