CSS兼容背景�?明处�?�

laoshu133 HTML/CSS 1评论 Sep 3

说到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 �?端

上一篇：javascript�?�?算转整型存在风险

下一篇：IE11 typeof window.ActiveXObject === "undefined"

共1评论

161668说：

于 2013-10-25 23:44:24 #

�?错哦，正需�?这个。

回�?

_米空格