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