1 min read

IE6、7、8 与 RGBA

Google Chrome 自 1.0 开始支持 RGBA,Firefox 从 3.0 开始,IE 比较晚,从 IE9 才开始。

rgba 很常用,可以给颜色设置透明度,比如:

<p style="background:rgba(0,255,0,.3);">hello rgba</p>

显示效果如下:

hello rgba

现代浏览器中,我们看到的是浅绿色背景,黑色字体。IE6、7、8 不认识 rgba 规则,所以会忽略它,就像没有声明过背景一样 – 所以是白底黑字。

但借助 IE 私有滤镜(filter),我们可以达到同样效果:

<p class="bga">hello rgba</p>

<!--[if IE]> 
<style>
.bga{
    background:transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#4C00FF00', EndColorStr='#4C00FF00')";/* IE8 */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#4C00FF00', EndColorStr='#4C00FF00');/* IE6、7 */
    zoom: 1;
}
<![endif]-->

现在,IE6、7、8 中,效果就跟现代浏览器一样了:

hello rgba

参考

  1. MDN – CSS color value
  2. MSDN -ms-filter property
  3. rgba – argb 转换工具
报告问题 修订