Heim > Web-Frontend > HTML-Tutorial > 利用div实现遮罩层效果_html/css_WEB-ITnose

利用div实现遮罩层效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-24 11:42:10
Original
978 Leute haben es durchsucht

利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面。下面贴出示例代码:

<!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>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage