文章部分内容来自：RGBa Browser Support
老版本的IE不支持RGBa的背景色，不过我们可以用滤镜实现同样的效果。上代码：
01 |
<!DOCTYPE html> |
02 |
<html> |
03 |
<head> |
04 |
<title>Demo</title> |
05 |
<style type="text/css"> |
06 |
#div1 { |
07 |
padding: 10px; |
08 |
width: 380px; |
09 |
height: 205px; |
10 |
background: url(shuizhu.jpg); |
11 |
} |
12 |
#div2 { |
13 |
color: #FFF; |
14 |
font-size: 40px; |
15 |
font-weight: bold; |
16 |
text-align: center; |
17 |
|
18 |
height: 205px; |
19 |
line-height: 205px; |
20 |
background: rgba(125, 0, 0, .3); |
21 |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000 |
22 |
,endColorstr=#4B7D0000); |
23 |
} |
24 |
</style> |
25 |
</head> |
26 |
<body> |
27 |
<div id="div1"> |
28 |
<div id="div2"> |
29 |
Hello world! |
30 |
</div> |
31 |
</div> |
32 |
</body> |
33 |
</html> |
DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。
下面附上示例中用到的图片：
