马黑黑 发表于 2022-1-1 13:14

简单理解CSS遮罩层

去年，也就是昨天，来看你问到CSS遮罩层的问题，这里开帖回复。

遮罩层，就是层一被层二所遮罩，层一因为被遮盖失去一切交互功能（遮罩层透明时层一可以阅读）。不知道来看你要的是不是这个功能，如是，则很简单：

CSS代码：

.Div1 {
        width:100%;
        height:100%;
        background:white;
}

.Div2 {
        width:100%;
        height:100%;
        position:fixed;
        left:0;
        top:0;
        background:transparent;
}


html代码：

<div class="Div1">
        <p>文字</p>
        <img src="图片地址" alt="" />
</div>


马黑黑 发表于 2022-1-1 13:15

本帖最后由 马黑黑 于 2022-1-1 13:16 编辑 <br /><br /><style type="text/css">
.Div1 {
        width:100%;
        height:100%;
        background:white;
}
.Div2 {
        width:100%;
        height:100%;
        position:fixed;
        left:0;
        top:0;
        background:transparent;
}

</style>
<div style="width:600px;height:400px;">
<div class="Div1">
        <p>我是层一。我之上有一个透明背景的遮罩层，层二。遮罩层就是我的保护层，我这里显示的图片与文字等元素都被保护了起来，无法进行选择、复制等操作。</p>
        <img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/71/30_avatar_small.jpg" alt="" />
</div>

<div class="Div2"></div>

马黑黑 发表于 2022-1-2 16:25

{:4_203:}
页: [1]
查看完整版本: 简单理解CSS遮罩层