纯CSS实现背景透明，文字不透明的方法

医院网站的移动端要做一个banner滚动图，我想把每个banner图的标题也显示出来，直接把文字写在图片底部上会很突兀，需要做一个半透明的背景来放文字。于是百度了一些方法，发现很多方法虽然在我所用的浏览器上有效，但是到低版本的浏览器上则无效。很苦恼，仔细研究了一下css代码后终于找到解决方法，接下来就教大家如何用现纯CSS实现背景透明，文字不透明（兼容所有浏览器）。

首先，余斗所说的透明代表背景透明，在PS里表现是这样的：

实现透明的CSS方法通常有以下三种方式，以下案例余斗用不透明度都为50%的写法来表示，一一列举出来：

html代码为：

一、css3的opacity:x，x 的取值可以从 0 到 1，如opacity: 0.5代表透明度为50%。兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持。代码为：

使用opacity后整个模块都透明了，展现如下：

这个方法明显不是余斗想要的结果，故不可取。

二、css3的rgba，使用这个值可以设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持。代码为：

在background-color中使用rgba，标准浏览器中，背景透明，文字不透明，是余斗想要的效果，但是在IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂rgba，解析后颜色为透明，并不是余斗想要的效果，展现如下：

IE9版本以上浏览器显示效果

IE6和部分IE7内核的浏览器显示效果

既然低版本的IE内核浏览器不支持，那么这个方法也不适合余斗。

三、IE专属滤镜 filter:Alpha(opacity=x)，这个属性只适合低版本的IE浏览器，是IE浏览器专属，但是使用的时候要注意以下问题：

1. 仅支持IE6、7、8、9，在IE10版本被废除

2. 在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha

3. 在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位，可让子元素不透明

代码为：

展示效果如下：

IE9版本以上浏览器显示效果

IE6和部分IE7内核的浏览器显示效果

通过以上三种方法，不难发现，并没有哪种方法可以完美的兼容所有版本浏览器 ，但是我们针对IE6、7、8浏览器，可以采用fiter:Alpha，而针对高版本的浏览器我们采用rgba。然后，又有问题来了，IE9浏览器2个属性都支持，一起使用会重复降低不透明度，也算是一个bug。

此时，我们需要做一个判断，根据不同浏览器输出不同css代码，则完美解决问题：

展示效果如下：

IE专属滤镜 filter+css3的rgba完美兼容方法

至此，我们可以得出最佳的解决方案来实现背景透明，文字不透明，文章所用方法可以在Demo中预览，Demo地址为：Demo在线预览