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

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 是完 全透明的，看不见的。1 到 0 之间的任何值都表示该元素的透明程度。*/ 所以为了实现各个浏览器的兼容性。我们将上述 2 种代码合并，以使各个 浏览器能正常显示透明度。具体代码如下： .box background:green; opacity:0.5; /* IE9/10、火狐、谷歌、Opera、safari */ filter:alpha(opacity=50); /* for IE68 */ 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 原创 那么对于 IE6/7/8 改如何解决呢？这里还只能利用 Filter 透明滤镜了，但 是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除 外）内设置 position:relative 才能不继承其父元素的透明滤镜。 具体代码案例 如下： .text_transparent width:200px; height:200px; background-color:rgb(100,200,300); filter:alpha(opacity=50); .text_transparent p position: relative; CSS 实现背景透明，文字不透明 所以为了实现背景透明，文字不透明能在各个浏览器中都能正常显示，我 们将上述 CSS 代码合并如下： .text_transparent width:200px; height:200px; background-color:rgb(100,200,300); filter:alpha(opa