ie8下的透明 问题

团队里经常遇到,索性整理一起

是我们在前端开发中经常遇到的,在问题中经常遇到的两个问题是背景色透明整体透明


先说下背景色透明,背景色透明,在现代浏览器中,可以用rgba颜色作为背景色。
简单介绍下rgba色,这个是在css3 出现的标准。所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。通过改变a的值来改变透明度。

background:rgba(200, 54, 54, 0.5);

这个颜色就是透明度为0.5的颜色背景,

如何处理兼容如果想要IE也支持颜色透明,那就要动用IE的私有滤镜
FILTER:progid:DXImageTransform.Microsoft.Gradient

兼容写法实例:

background:rgba(0,0,0,0.5); 
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

这里的7F是十六进制的表达方式,00 为最小的透明度(完全透明)FF为最大透明值(完全不透明)


下面说下整体透明
整体透明区别于背景色透明就是整个元素的都是透明的,在css3新的标准中为
opacity: .5;

兼容IE的写法

/* IE 4-9 */  
filter:alpha(opacity=50);  
/*This works in IE 8 & 9 too*/  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
/*IE4-IE9*/  
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
posted @ 2015-01-18 13:44  Yun.kou  阅读(1050)  评论(0编辑  收藏  举报