真~让IE8支持background: rbga; ，IE8下兼容rgba颜色的半透明背景

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属性的元素注定只有当背景。