CSS兼容背景透明处理

说到CSS背景半透明,各位CSSer肯定都不陌生,写过页面的大部分都干过这个事情,尤其是CSS2时代走过来的。

老题新解,现在已经步入CSS3时代了,对于处理CSS背景半透明应该已经不是很难的事了,不过请不要忘了咱在天朝,IE6的份额依旧不少, 查看份额

不扯,入正题,先看完整DEMO

opacity + filter:alpha

大部分情况下我们做背景透明都是这么写的,代码简单,写起来也方便;不过大部分情况是需要多增加一个标签,因为这么写会连文字一起透明

1
.opacity .test{ background:#fff; opacity:.4; filter:Alpha(opacity=40);}

Rgba + filter:progid:DXImageTransform.Microsoft.Gradient

首先说说background:rgab/hsla,这两个新的颜色函数都能定义alpha通道值,然后可以使得背景半透明,甚至还可以使用CSS3gradient的渐变函数,生成更为复杂的背景,具体请自行谷歌;

在CSS2后面某个时候,有童鞋发现了filter:progid:DXImageTransform.Microsoft.GradientIE下能通过渐变滤镜去模拟背景透明,而不用文字透明

当然,有利必然有弊,这么写,代码略长,写起来麻烦:

IE滤镜采用AARRGGBB(16进制)进行排列,AA位值也为 00-FF,也就是说10进制需要转成16进制

计算规则 10进制值*256/100然后再转16进制,就是说如果设置0.4的透明度0.4*256/100 = 102.4转16进制为66

1
.rgba .test{ background:rgba(255,255,255,.4); background:none\9; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#66FFFFFF,endColorStr=#66FFFFFF);}

Rgba with last-child

上面背景透明的实现已经是本文的核心部分,但是如果你够细心,会发现此效果在IE9下透明度明显不对,

IE9当background:rgba和filter同时使用时,会出现两个效果叠加,

不过我们可以用:last-child巧妙修复;因IE6不支持 :first/last-child伪类,IE7,8-仅支持:first-child伪类,IE9+全部支持

1
2
.rgba_with_lastchild .test{ background:none; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#66FFFFFF,endColorStr=#66FFFFFF);}
.rgba_with_lastchild .test:last-child{ background:rgba(255,255,255,.4); filter:none;}

当看到此处的时候,应该本文应该是能结尾了,因为上面的效果在各个浏览器下已经接近完美了,不过还有个不得不说的密码

Filter with overflow

IE7- 当使用滤镜时,大部分情况会使得元素具有 overflow:hidden 特性,具体请见DEMO最后

全文完,欢迎拍砖。

最后在放一次DEMO地址