html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="basic.css">
</head>
<body>
<div class="masked-element">
<div class="content">这里是需要遮罩的内容</div>
</div>
<div class="container">
<div class="content">正常内容</div>
</div>
</body>
</html>
basic.css
.masked-element {
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
/*background: url('http://www.vipsoft.com.cn/vipsoft/img/logo/classic/light.png') no-repeat center center;*/
/*background-size: cover;*/
}
.masked-element::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6); /* 遮罩颜色和透明度 */
}
.content {
position: relative; /* 确保内容在遮罩之上 */
z-index: 1;
color: white; /* 遮罩下的文字颜色 */
}