[html] 图层div半透明,文字不透明
以下代码兼容ie6+,firefox和chrome,目的是,使图层半透明,而文字不透明。
<!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>图层div透明,文字不透明</title>
<style type="text/css">
body {
background-color:#000000;
}
#container{
border:1px solid #c00;
background-color:rgba(212,0,0,0.5);
background:#f00\9;
filter:alpha(opacity=50);
width:500px; margin:40px auto;
line-height:200%;
font-size:14px;
padding:14px;
color: #fff;
}
#container *{ position:relative;}
</style>
</head>
<body>
<div id="container">
<span>我是文字,我不透明哦~在firefox和下面,主要是使用了 background-color: rgba的 a (alpha) 这个特性,而对于ie6+,是使用了IE滤镜 filter,注意CSS代码</span>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图层div透明,文字不透明</title>
<style type="text/css">
body {
background-color:#000000;
}
#container{
border:1px solid #c00;
background-color:rgba(212,0,0,0.5);
background:#f00\9;
filter:alpha(opacity=50);
width:500px; margin:40px auto;
line-height:200%;
font-size:14px;
padding:14px;
color: #fff;
}
#container *{ position:relative;}
</style>
</head>
<body>
<div id="container">
<span>我是文字,我不透明哦~在firefox和下面,主要是使用了 background-color: rgba的 a (alpha) 这个特性,而对于ie6+,是使用了IE滤镜 filter,注意CSS代码</span>
</div>
</body>
</html>