怎样使用css给一个界面增加一个遮罩

2024-07-15 16:30| 来源: 网络整理| 查看: 265

如下是经过多次验证后得到的效果，html代码可直接复制验证

透明遮罩层 function showCSS() { document.getElementById("ZZ").style.display ="block"; setTimeout(function(){ document.getElementById("ZZ").style.display ='none'; },2000); } #ZZ { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 99999; -moz-opacity: 0.1; opacity: .1; filter: alpha(opacity=10); } body { padding-top: 100px; }

其中是遮罩的div，这个遮罩的本质就是div最大化覆盖到所有元素的最上层在css样式上 z-index: 99999;index的值越大，表示层级越高

top: 0%; left: 0%; width: 100%; height: 100%;

则表示这个遮罩的大小和位置

-moz-opacity: 0.1; opacity: .1; filter: alpha(opacity=10);

表示遮罩的透明度，值越小透明度越高

【本文地址】

公司简介

联系我们