IE8下兼容rgba颜色的半透明背景

这样的标题在百度和google搜索下很多篇文章，讲解IE8下兼容rgba的。

这些文章全部都是使用IE下的filter来使元素透明，但是这个里面会有bug。

它们的如下：

background: rgba(0,0,0,.5);  /*支持rgba的浏览器*/

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

IE filter 的bug

简答评论下这个代码的问题，首先这代码在IE9+上就会有颜色叠加的bug，fliterIE9+也同样支持的

其次IE8上确实是可以运行，但是这个元素对css的:hover，js的click事件（其他事件没有测试）支持将变得怪异，这个bug我的理解是IE对使用了filter的对象将会降低它的层次，就想是使用的z-index的感觉，只是视觉上没有变化，看 例子

注意，在例子中只有有文字的地方才能触发hover事件和点击事件，没有文字的地方点击事件就直接穿这个div点击到了下面一层的div了。这里才是重点。

我的解决方式

代码先行

// css

.a1{

	margin: 10px auto 0;

	width: 200px;

	height: 200px;

	position: relative;

	overflow: hidden;

	background: lightblue

}

.a2{

	width: 130px;

	height: 160px;

	margin-left: 20px;

	margin-top: 20px;

	background: pink

}

.a3{

	position: absolute;

	right: 0;

	top: 50%;

	margin: 20px;

	height: 120px;

	width: 110px;

	margin-top: -60px;

	background: no-repeat, rgba(128,128,128,.5);

	color: black;

	font-size: 12px;

	z-index: 2

}

.a3 > .background-mask{

	filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F808080,endcolorstr=#7F808080);

	zoom: 1;

}

.a3:hover{

	color: white;

}

//html

<div class="a1">

	<div onclick="a2(this)" class="a2"></div>

	<div onclick="a3(this)" class="a3">

		我是a3，我用IE的filter属性的，我有hover看我的颜色，我还有click事件，分别点击文字和我的空白的地方

		<!--[if IE 8]><div class="background-mask"></div><![endif]-->

	</div>

</div>

可以看 例子 方便点

关键的地方是background: no-repeat, rgba(128,128,128,.5);用background的多个属性让background在IE8上永不生效，然后IE8用<!--[if IE 8]><div class="background-mask"></div><![endif]-->来生成背景

对于文字会被filter影响的问题，可以把文字和filter分开放，然后用z-index把文字内容放在filter上层，这样filter就不会把文字内容影响到了。

这次主要是说明了下ie8上兼容透明背景的使用，还是一个观点问题，背景就应该在内容的下方，这样就不会出怪异问题。使用了filter属性的元素注定只有当背景。