说到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.Gradient
IE下能通过渐变滤镜去模拟背景透明,而不用文字透明
当然,有利必然有弊,这么写,代码略长,写起来麻烦:
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地址
共1评论
161668说:
于 2013-10-25 23:44:24 #
不错 哦,正需要这个。
回复