Home > Article > Web Front-end > Use div to achieve mask layer effect_html/css_WEB-ITnose
Use div to achieve mask layer effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:10940browse
Using div to achieve the mask layer effect is to use a full-screen, semi-transparent div to cover other elements on the page. A typical example is Baidu's login interface. Sample code is posted below:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>全屏div</title><style>html,body { margin:0; height:100%;}#test { width:100%; height:100%; background-color:#000; position:absolute; top:0; left:0; z-index:2; opacity:0.3; /*兼容IE8及以下版本浏览器*/ filter: alpha(opacity=30); display:none;}#log_window { width:200px; height:200px; background-color:#FF0; margin: auto; position: absolute; z-index:3; top: 0; bottom: 0; left: 0; right: 0; display:none;}</style><script>function shield(){ var s = document.getElementById("test"); s.style.display = "block"; var l = document.getElementById("log_window"); l.style.display = "block";}function cancel_shield(){ var s = document.getElementById("test"); s.style.display = "none"; var l = document.getElementById("log_window"); l.style.display = "none";}</script></head><body><a href="javascript:shield()">打开遮罩</a><div id="test"></div><div id="log_window"><a href="javascript:cancel_shield()">关闭</a></div></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css requires shadow effect_html/css_WEB-ITnoseNext article：css requires shadow effect_html/css_WEB-ITnose