兼容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;





 

posted @ 2017-12-11 10:30  U炒饭  阅读(103)  评论(0编辑  收藏  举报