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

CSS实现背景透明文字不透明教程 酱油到此游Blog原创 jiangyou.sinaapp.com CSS实现背景透明,文字不透明 本教程出自酱油到此游Blog 【本教程如有错误,欢迎去我的博客留言】 CSS实现背景透明 CSS实现背景透明有两种方法,一种方法称之为透明滤镜Filter,另一种称之为Opacity透明度。前面一种是专门适用于IE6/7/8浏览器的,而后面一种是W3C标准透明,适用于现在的IE9和IE10,以及谷歌、火狐、欧朋、苹果等浏览器。 IE6/7/8中透明滤镜Filter是利用Alpha通道来实现的。由于IE9/10引入了 CSS3 Color Module 的支持,使得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{ background:green; opacity:0.5; /* opacity取值为1的元素是完全不透明的,反之,取值为0是完 酱油到此游Blog原创 jiangyou.sinaapp.com 全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。*/ } 所以为了实现各个浏览器的兼容性。我们将上述2种代码合并,以使各个浏览器能正常显示透明度。具体代码如下: .box{ background:green; opacity:0.5; /* IE9/10、火狐、谷歌、Opera、safari */ filter:alpha(opacity=50); /* for IE6~8 */ } CSS实现背景透明,文字不透明 利用上述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。值的取值范围为:0 - 255。A参数代表alpha透明度,不可为负值。*/ } 酱油到此游Blog原创 jiangyou.sinaapp.com 那么对于IE6/7/8改如何解决呢？这里还只能利用Filter透明滤镜了,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点，文本节点除外，内设置position:relative才能不继承其父元素的透明滤镜。 具体代码案例如下: 所以为了实现背景透明,文字不透明能在各个浏览器中都能正常显示,我们将上述CSS代码合并如下: .text_transparent { width:200px; height:200px; background-color:rgb(100,200,300); filter:alpha(opacity=50); background: rgba(100,200,300,0.5); } 酱油到此游Blog原创 jiangyou.sinaapp.com .text_transparent p{ position: relative; }