本文为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时，二者同时生效，那么此时，元素的不透明度值会变高，当兼容性要求较高时，还需要单独处理一下。效果对比图如下：
