[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>

  

posted @ 2012-06-02 20:15  DavidHHuan  阅读(1691)  评论(0编辑  收藏  举报