半透明背景(兼容IE)

为什么80%的码农都做不了架构师？>>>   

在CSS3中有rgba属性，可以很方便的实现背景透明，但对于IE家族来说却不是那么容易实现；

FireFox、chrome、opera、safari

凡是对支持CSS3且支持W3标准的浏览器都可以现实的，比如safari,chrome的webkit核心的浏览器、firefox的Gecko内核、opera的Presto内核(最近传说转向webkit内核)；

格式：background:rgba(255, 0, 0, 0.5);

background:rgba([red:0~255], [green:0~255], [blue:0~255], [alpha:0~1]);

IE

ie系列浏览器使用的是Trident内核(IE10以下不支持CSS3)

对于IE浏览器实现半透明的方法有两种

1、alpha滤镜

这是以前经常使用的方法，利用ie独有的透明滤镜来实现。
<!--[if IE]>

<style type="text/css">

.t{

background:#f00;

filter:alpha(opacity=50);

zoom:1

}

.t *{

position:relative

}

</style>

<![endif]-->

但是使作这种方法有一个要注间的地方就是，如果这个容器直接包含文本就没法实现文本不透明，必须加一层容器在外围。

2、渐变效果滤镜

<!--[if IE]>

<style type="text/css">

.t{

background:transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FF0000,endColorstr=#80FF0000);

zoom:1;

}

</style>

<![endif]-->

注：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#[[alpha:00~FF][red:00~FF][green:00~FF][blue:00~FF]], endColorstr=#[[alpha:00~FF][red:00~FF][green:00~FF][blue:00~FF]];

00表示完全透明，FF就是全不透明，转换成十进制的范围就是0~255，如果想实现50%的透明需要进行一下换算，50/100 * 255 = 127.5，按128来算，转换成16进制为80。

 

 

原文地址:http://www.xwbetter.com/background-trans/

转载于:https://my.oschina.net/wzzz/blog/356116