兼容rgba
background:rgba(); 是css3新增的。它非常实用,可以很简单的就做出一个背景透明而内容不透明的遮罩层。
可惜的是IE8及IE8以下并不兼容该属性。但我们可以通过IE下的滤镜来实现rgba的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body { margin:0; background:pink; } #box { width:300px; height:300px; margin:100px auto; background:rgb(0, 0, 0); background: rgba(0,0,0,0.7); } p { margin:0; padding:0; font-size:40px; line-height:300px; text-align:center; } </style> <!--[if lt IE 9]> <style type="text/css"> #box { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000); zoom: 1; } </style> <![endif]--> </head> <body> <div id="box"> <p>hello world</p> </div> </body> </html>
以上代码即可实现在IE8下兼容background:rgba();
这里只说一下 IE实现的方面
一、<!--[if lt IE 9]>
<![endif]-->
因为IE9浏览器即支持rgba(),也支持filter.会使效果更加透明(IE9以上不会)。所以我们需要兼容代码只需要在IE9以下的浏览器运行。
二、filterw
我们只需要注意 startColorstr=#b2000000,endColorstr=#b2000000。
其中b2是filter的值,相当于0.7的透明度,而后面的000000是black颜色的十六进制代码。
------------------
以下是透明度对应的filter值
(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)
例子:灰颜色的十六进制代码是#cccccc.透明度为0.5。就写成#7fcccccc;