頂部固定div可設置半透明效果

字號:


    這篇文章為大家介紹了一個頂部固定的div可設置半透明效果,文末有效果圖,大家可以參考下。
    代碼如下:
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""***">
    <html>
    <head>
    <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
    <title>頂部固定</title>
    <styletype="text/css">
    html,body{overflow:hidden;margin:0px;width:100%;height:100%;}
    .virtual_body{width:100%;height:100%;overflow-y:scroll;overflow-x:auto;}
    .fixed_div{position:absolute;z-index:2008;top:0px;left:0px;right:16px;height:40px;background:#CCCCCC;border-bottom:3pxinset;border-color:#006699;
    //bottom:20px;
    //border:1pxsolidred;
    //border-style:inset;
    //半透明效果制作
    //filter:alpha(opacity=50);
    //-moz-opacity:0.5;
    //opacity:0.5;
    //background:#666666;
    }
    </style>
    </head>
    <body>
    <divclass="fixed_div"><fontcolor="red">***</font></div>
    <divclass="virtual_body">
    <divstyle="height:888px;">
    <p>
    再見,我一定會回來看你的!
    </div>
    </div>
    </body>
    </html>
    效果圖如下: