Tip: you can modify some code before running
<!DOCTYPE html> <ptml> <pead> <meta charset="gb2312" /> <title>The background is translucent and covers the entire visible area.</title> <style> html,body{ height:100%; margin:0; padding:0; font-size:14px;} p{ line-height:18px;} .mask{height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } .content{height:600px; width:800px; overflow:auto; border:2px solid #ccc; background-color:#fff; position:absolute; top:50%; left:50%; margin:-300px auto auto -400px; z-index:1001; word-wrap: break-word; padding:3px;} .ph{ height:1000px;} </style> </pead> <body> <p class="ph">Place holder height: 1000px;</p> <div class="mask opacity"></div> <div class="content"> <p>The background is translucent and covers the entire visible area.</p> <p>This article mainly introduces how to achieve compatibility between multiple browsers when the content exceeds one screen. Let's take a simple example to see how to implement it.</p> <p>The html code is very simple <d I v class = "mask opacity"> </d I v></p> <p>1. The opacity attribute in css3 can be used for translucent effects, and the IE alpha filter can be used in earlier IE browsers. Code:<code>. Opacity {opacity: 0.3; filter: alpha (opacity = 30); background-color: #000 ;}</code> </p> <p>2. To cover the entire visible area, the common practice is:<br/> <code>Html, body {height: 100%}</code> <br/> <code>. Mask {height: 100%; width: 100% ;}</code> <br/>However, in this way, when the content exceeds the screen size, only IE6 will show the expected effect. In other browsers, the content below the screen cannot be overwritten. To be compatible with other browsers, we can use<code>Position: fixed;</code>To solve this problem</p> <p> <strong>Complete Code</strong>: <pre>Html, body {height: 100%; margin: 0; padding: 0 }. mask {height: 100%; width: 100%; position: fixed; _ position: absolute; top: 0; z-index: 1000 ;}. opacity {opacity: 0.3; filter: alpha (opacity = 30); background-color: #000 ;}</pre> </p> <p> <strong>References:</strong>Background translucent best practices vertical center implementation methods DIV height 100%</p> </div> </body> </ptml> </td> </tr></table>
Tip: you can modify some code before running
