CSS兼容背景透明处理 - 凡事预则立,不预则废

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

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

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


opacity + filter:alpha

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


.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


.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+全部支持


.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地址

Tags:CSS前端

1评论

  1. 不错 哦,正需要这个。

    回复

发表评论

最新评论及回复

    loading

最近发表

    loading

网站分类

    loading

文章归档

    loading

友情链接

Top Comments Footer