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

最新推荐文章于 2024-08-25 20:15:05 发布

笔下无书生

最新推荐文章于 2024-08-25 20:15:05 发布

阅读量4.9k

点赞数 1

分类专栏：前端相关文章标签： css 遮罩 div htm

本文链接：https://blog.csdn.net/weixin_45005931/article/details/90727191

版权

前端相关专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>透明遮罩层</title>
    <script language="javascript" type="text/javascript">
        function showCSS() {
            document.getElementById("ZZ").style.display ="block";
			setTimeout(function(){
			document.getElementById("ZZ").style.display ='none';
			},2000);
        }
    </script>
    <style type="text/css">
        #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;
        }
    </style>
</head>
<body>
<input id="Zhow" type="button" value="显示遮罩"  onclick="showCSS();"/>
<div id="ZZ"></div>
</body>
</html>

其中<div id="ZZ"></div>是遮罩的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);

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

笔下无书生

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录