快乐、开心去编程着....

前端开发爱好者

div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器

IE:外层filter,内层position:relative或absolute。

FF:外层不使用opacity,而用background:rgba()。

--------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <style>

        #wrapper

        {

            background: #369;

            width:300px;

            height:150px;

        }

        #div1

        {

            -moz-opacity: 0.3; /* FF 3.5以下 */

            opacity: 0.3; /* FF 3.5及以上 */

            filter: alpha(opacity=30); /* IE6及以上 */

            background: #fff;

            width: 200px;

            height: 50px;

        }

        #div2

        {

            background: rgba(255, 255, 255, 0.3) !important; /* IE无效,FF有效 */

            background: #fff;

            filter: alpha(opacity=30);

            width: 200px;

            height: 50px;

        }

        #div2 span

        {

            position: relative;

        }

    </style>

 </head>


 <body>

<div id="wrapper">

        <div id="div1">

            <span>图层背景半透明,字体颜色也半透明</span>

        </div>

        <br />

        <div id="div2">

            <span>图层背景半透明,字体颜色不半透明</span>

        </div>

    </div>

 </body>

</html>



评论
热度(1)
©前端开发爱好者 —— Powered by LOFTER