css实现背景透明文字不透明教程

《css实现背景透明文字不透明教程》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、酱油到此游Blog原创jiangyou.sinaapp.comCSS实现背景透明，文字不透明本教程出自酱油到此游Blog【本教程如有错误，欢迎去我的博客留言】CSS实现背景透明CSS实现背景透明有两种方法，一种方法称之为透明滤镜Filter,另一种称之为Opacity透明度。前面一种是专门适用于IE6/7/8浏览器的，而后面一种是W3C标准透明，适用于现在的IE9和IE10，以及谷歌、火狐、欧朋、苹果等浏览器。IE6/7/8中透明滤镜Filter是利用Alpha通道来实现的。由于IE9/10引入了CSS3

2、ColorModule的支持，使得IE9/10在标准模式下不在支持透明滤镜Filter，而只支持Opacity透明度，这也是大势所趋。IE6/7/8中实现背景透明的CSS代码如下：.IE6_8_box{background:green;filter:alpha(opacity=50);/*这里的opacity属性用来设置透明渐变的开始透明度。取值范围为0-100。默认值为0，即完全透明。100为完全不透明。*/}非IE6/7/8浏览器实现背景透明的CSS代码如下：.not_IE6_8_box{backgr

3、ound:green;opacity:0.5;/*YibinCityCitytracktrafficplanningisYibincityregionalrangewithintracktrafficsystemofonceintegration,andcitytracktrafficalsoisYibinCityCityintegratedtracktrafficsystemintheofpart,foraccurategraspcitytracktrafficresearchofobject酱油到此游

4、Blog原创jiangyou.sinaapp.comopacity取值为1的元素是完全不透明的，反之，取值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。*/}所以为了实现各个浏览器的兼容性。我们将上述2种代码合并，以使各个浏览器能正常显示透明度。具体代码如下：.box{background:green;opacity:0.5;/*IE9/10、火狐、谷歌、Opera、safari*/filter:alpha(opacity=50);/*forIE6~8*/}CSS实现背景透明，文字

5、不透明利用上述2种方法，可以实现背景透明，但是2种方法都会是文本内容页透明，这不是我们所想要的，该如何解决呢？办法是有的，且往下看。由于IE6/7/8浏览器来说他们不支持CSS3的新属性，而最新的浏览器都基本支持CSS3中的大部分属性。所以我们可以利用CSS3新属性RGBA来实现背景透明，文字不透明，代码如下：.not_IE6_8{background:rgba(100,200,300,0.5);/*RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数分别为100,200,300

6、。值的取值范围为：0-255。A参数代表alpha透明度，不可为负值。*/}YibinCityCitytracktrafficplanningisYibincityregionalrangewithintracktrafficsystemofonceintegration,andcitytracktrafficalsoisYibinCityCityintegratedtracktrafficsystemintheofpart,foraccurategraspcitytracktrafficresearch

7、ofobject酱油到此游Blog原创jiangyou.sinaapp.com那么对于IE6/7/8改如何解决呢？这里还只能利用Filter透明滤镜了，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜。 具体代码案例如下：

8、me="keywords"content="">.text_transparent{width:200px;height:200px;background-color:rgb(100,200,300);filter:alpha(opacity=50);}.text_transparentp{position:relative;}