CSS - 背景色半透明的写法（兼容IE8）
作者：hangge | 2018-01-14 08:10
1，通常的做法
（1）目前大多数浏览器都支持 CSS3，我们只需将背景色设为类似于 rgba(255, 255, 255, 0.4) 这样的 rgba 颜色即可：
- 前三个值分别表示红绿蓝（0 - 255）。
- 第四个值是透明值，取值 0 完全透明，取值 1 完全不透明
（2）下面是一个简单的样例，我在整个页面上方覆盖一个半透明的黑色蒙版层。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#mask {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<input type="text" name="" value="欢迎访问 hanggge.com">
<button type="button" name="button">提交</button>
<div id="mask" />
</body>
</html>
2，兼容低版本浏览器的写法
（1）对于那些低版本的浏览器（比如：IE8），上面的写法完全没有效果。如果需要兼容 IE8 的话，可以借助 IE 滤镜来实现。
（2）比如我们在上面的样式里增加 filter 相关代码：
样式里的 #88000000 说明：
- 前两位是十六进制透明值，00 是完全透明，FF 是完全不透明。
- 后六位是十六进制颜色值。
#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 打开页面，可以发现透明图层正常显示了：
全部评论（0）