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