背景透明 内容不透明的方法

时间：2024-03-13 20:25:15

以前是这样实现背景透明内容不透明的：将背景与内容分别放在两个DIV中，然后使背景DIV透明，最终达到背景透明内容不透明的效果（挺麻烦的），背景透明使用的样式是{opacity:0.5;filter:alpha(opacity=50);}。

最近才发现，原来还有更好的方法。

支持CSS3的浏览器我们可以使用background-color:rgba(0,0,0,0.5)来实现透明，rgba中的a则代表透明度，取值范围在0-1之间。

对于不支持CSS3的IE浏览器我们可以使用滤镜来达到使背景透明的目的，我们可以使用IE专有的滤镜，如下：

1

filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);

只需要保持startColorStr与endColorStr值相同即可。其中startColorStr与endColorStr的 值的格式为#AARRGGBB， AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色 值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度， 00 是完全透明， FF 是完全不透明。超出取 值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF （不透明蓝色）。

 

因此，如果需要实现DIV背景透明内容不透明则可以这样做：

1

.opacity{background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);}

 

上面的做法是让所有的IE浏览器都使用滤镜，而IE9，IE10是支持CSS3的rgba属性的，所以我们可以做一些处理：

在head中再添加（针对IE9以下的浏览器）：

1

2

3

4

5

<!--[if lt IE 9]>

<style>

.opacity{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#77000000, endColorstr=#77000000);}

</style>

<![endif]-->

相关文章