背景色透明度兼容IE8的写法

本文为Echoyya、所创，转载请带上原文链接，感谢 https://www.cnblogs.com/echoyya/p/14236242.html

通常的做法

目前大多数浏览器都支持 CSS3，只需将背景色设为类似于rgba(0, 0, 0, 0.5) 这样的rgba 颜色即可：前三个值分别表示红绿蓝(0 - 255)。
第四个值是透明值，取值 0 完全透明，取值 1 完全不透明

Demo 在整个页面上方覆盖一个半透明的黑色蒙版层。

<style>
  #mask {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, .5);
  }
</style>
<body>
  <h1>Hello World!!</h1>
  <div id="mask" />
</body>

兼容IE8及以下版本浏览器

对于低版本的浏览器，上面的写法完全没有效果。想要兼容可以借助 IE 滤镜来实现。
可以在上面的样式里增加 filter 相关代码,#88000000 说明：
- 前两位是十六进制透明值，00 是完全透明，FF 是完全不透明。88对应差不多0.53左右
- 后六位是十六进制颜色值。
对应关系表

rgba 透明值	IEfilter 值
0.1	19
0.2	33
0.3	4C
0.4	66
0.5	7F
0.6	99
0.7	B2
0.8	C8
0.9	E5

#mask {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, .5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
}

再次使用 IE8 打开页面，可以发现透明图层正常显示了

注：IE8以下显示正常 ( filter 生效 )，IE10-IE11 显示正常 ( rgba 生效 )，当IE9时，二者同时生效，那么此时，元素的不透明度值会变高，当兼容性要求较高时，还需要单独处理一下。效果对比图如下：