CSS如何实现Div层背景半透明而内容不透明效果?例如CF查看战绩的那种透明效果

解决方案 »

  1.   


    <html>
    <head>
    <title>兼容ie6,ie7以及firefox的css透明滤镜,文字不继承其透明属性</title>
    <style type="text/css">
        #container{ 
    border:1px solid #c00; 
    background-color:rgba(212,0,0,0.3); 
    *background:#f00; 
    filter:alpha(opacity=30); 
    width:500px;  margin:40px auto; 
    line-height:200%; 
    font-size:14px; p
    adding:14px;
        }    #container *{ position:relative;}</style>
    </head>
    <body>
    本例是一个兼容IE6/IE7/IE8和火狐浏览器的css实现半透明层效果!
    <div id="container">
         <span>我是内容我是内容我是内容我是内容我</span>
        </div>
    </body>
    </html>
      

  2.   


    firefox   跟 IE下 效果不一样属性继承了,文字也变  透明了
      

  3.   

    楼主啊下面这个我测试过了,都OK的,给我分吧~~~<title>透明</title>
    <head>
    <style>
    #container {
        color: #154BA0;
        background: #ff0000;
        filter: Alpha(Opacity=10, Style=0);
        opacity: 0.10;
        position: absolute;
        height: 200px;
        width:500px;
        z-index:20;
    }#text {
        position: absolute;
        height: 200px;
        width:500px;
        text-align:center;
        z-index:30;
    }
    </style>
    </head>
    <body >
    <div id="container"></div>
    <div id="text">背景半透明但文字不透明</div>
    </body>
    </html> [color=#FF0000]要么两个叠在一起的层
    要么用半透明的png(推荐)[/color]