使用rgba属性兼容IE8

最新推荐文章于 2021-07-27 15:59:22 发布

乐橙Web

最新推荐文章于 2021-07-27 15:59:22 发布

阅读量774

点赞数

分类专栏： H5，CSS3 文章标签： WEB前端 hack ie 8

H5，CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

① CSS3 rgba 即在原本3原色的基础上增加了alpha(透明度)通道，该属性的兼容性如下：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(√)Firefox 3.0.10	(√)Chrome 2.0.x	(√)Opera 9.64	(√)Safari 4
	(×)IE7
	(×)IE8
	(√)IE9

IE家族只有9以后的版本支持该属性；

有童鞋可能对rgba的使用环境不大清楚，但肯定熟悉opacity属性。opacity实现了元素的alpha通道，如opacity:0.5表示50%的透明度，但opacity不止实现了元素的透明度，同时包括元素的子元素也有该透明度，比如


   
   
     
     
      
      <div style="background:#000;opacity:0.5">我是内部文本
      
      </div>

将使整个节点树显示为50%的透明灰度；而rgba可以直接表示颜色属性和透明度，比如


   
   
     
     
      
      <div style="background:rgba(0,0,0,0.5);">我是内部文本
      
      </div>

前三个参数是颜色的RGB表示法，如0,0,0就表示黑色，最后一个参数是alpha值，和opacity具有相同的意思，但这次的设置是使<div>的背景色变为50%的透明灰度，内部节点和内容依然是不透明的。

对于支持该属性的浏览器可以直接使用：

针对IE6-8的hack为：


   
   
     
     
      
      .class
      
      {
     
     

     
     
      
          filter
      
      :progid
      
      :DXImageTransform
      
      .Microsoft.gradient
      
      (startColorstr
      
      =
      
      #BF000000
      
      ,endColorstr
      
      =
      
      #BF000000
      
      )
      
      ;
     
     

     
     
      
      }

用到了IE自家的filter滤镜。IE虽然不支持很多标准，但自己也提供了很多有意思的功能，比如filter滤镜、expression行内表达式等。相关的参数我不再解释，自己查查。提示两点：

1.startColorstr和endColorstr的值由两部分组成：前两位是alpha值，后六位是颜色值，都是十六进制表示法；可以用x=a*255(其中x是表达式的16进制值，a表示alpha值如0.5)；
2.因为IE5+都是支持filter的，所以可以这样写：


   
   
     
     
      
       
     
     

     
     
      
      <!--[if IE 8]>
     
     

     
     
      
      <style>
     
     

     
     
      
      .class{-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000)";}
     
     

     
     
      
      </style>
     
     

     
     
      
      <![endif]-->

如果写在css里，因为IE9+既支持filter，又支持rgba，所以会看到两者叠加的效果。

RGBa是一种在CSS中声明包含透明效果的颜色的方法，通过RGBa我们可以将一个元素设置为透明，而不会影响其子元素。但是并非所有的浏览器支持RGBa的背景色，其中用户颇多的老版本IE浏览器就不支持，好在IE浏览器支持条件注释，我们可以抛弃RGB并使用IE浏览器的一个私有CSS滤镜来实现同样的效果。上代码：

点击查看在线演示

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。

RGBa颜色还可以用于border，不过，不同的浏览器对于border的RGBa支持不太一样，不过唯一的不同是，Firefox在border的拐角处会出现叠加，比如透明度是0.4，那么在Firefox中，四个角的透明度会变成0.8，而支持RGBa的非FF浏览器不会出现这种情况。