相信不少小伙伴大部分都写过这样的页面，小编找来了一个例子，比如上面图中，文字的黑色背景。给一段文字加背景透明度的时候都遇见过IE不兼容的问题，下面我们聊聊这些问题的处理方法。

如何添加背景透明度

我们工作中经常用到添加背景透明度的方法两种：

1.opacity设置透明度

2.通过rgba设置透明度

下面逐个解说：

opacity方法

opacity:1将使元素不透明，而设置opacity:0将使得元素完全不可见。你只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越小就越接近透明。opacity属性可以精确地小数点后两位，所以值取“.01”和“.02”实际上是不同的。

IE下照旧有别于其他浏览器，并且目前也有三个不同版本的IE在广泛使用，透明度设置是不同的，有时需要额外的CSS来控制：（比如，下面例子中把透明度设为0.4）

#myElement { filter: alpha(opacity=40); }

如果myElement 这个div上有文字，这时候背景透明度就展现出了极大的弊端，因为文字也会跟着被添加透明度。

举例：

为了更明显的对比，标题一所在的div没有添加背景透明度，标题二所在的div添加了背景透明度，你会发现，“标题二”文字因为背景透明度也发生了透明的变化。

为了避免这样的事情发生，我们经常选择用rgba添加背景透明度的方法来实现。

通过RGB（前三个数字）给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。比如：

#rgba { background: rgba(98, 135, 167, .4); }

同样的IE也是不兼容rgba，需要添加一行特定的代码给IE。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);

#7f000000 其中7f是透明度0.5转换成16进制的数值，000000是黑色的16进制数值。

举例代码：

观察代码就会发现，“标题一”单独加了<p>标签，和下面没有添加<p>标签的“标题二”“标题三”起到了同样的背景透明效果。最重要的是其中的文字并没有因为背景图透明度的变化而发生变化！

个人认为这个写法是最好的，无需单独定义背景层，代码精简，小编也一直在用。

而具体透明度对应的数值，参考网站：http://www.jb51.net/web/89577.html中的这张对照表：

欢迎前端小伙伴们指正，一起学习，共同进步。

谢谢关注。