码迷,mamicode.com
首页 > 其他好文 > 详细

让IE浏览器支持RGBa的背景色

时间:2014-08-30 13:46:29      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   使用   ar   for   art   

RGBa是一种在CSS中声明包含透明效果的颜色的方法,通过RGBa我们可以将一个元素设置为透明,而不会影响其子元素。但是并非所有的浏览器支持RGBa的背景色,其中用户颇多的老版本IE浏览器就不支持,好在IE浏览器支持条件注释,我们可以抛弃RGB并使用IE浏览器的一个私有CSS滤镜来实现同样的效果。上代码:

<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000,endColorstr=#4B7D0000);
zoom: 1;
}
</style>
<![endif]-->

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的,其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢?很简单,先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4B。

前两位转换十六进制,如果要20%的透明度,则要将80转为十六进制

 

RGBa颜色还可以用于border,不过,不同的浏览器对于border的RGBa支持不太一样,不过唯一的不同是,Firefox在border的拐角处会出现叠加,比如透明度是0.4,那么在Firefox中,四个角的透明度会变成0.8,而支持RGBa的非FF浏览器不会出现这种情况。

文章引用地址:http://www.iefans.net/ie-zhichi-rgba/ 作者:iefans

让IE浏览器支持RGBa的背景色

标签:style   blog   http   color   os   使用   ar   for   art   

原文地址:http://www.cnblogs.com/snowbaby-kang/p/3946291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!