以下代码兼容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

>