不改变DOM，给元素增加遮罩(背景)

最新推荐文章于 2023-09-03 22:27:40 发布

爪蛙没有爪

最新推荐文章于 2023-09-03 22:27:40 发布

阅读量784

点赞数

分类专栏： CSS HTML 文章标签： css html 遮罩弹框

本文链接：https://blog.youkuaiyun.com/qq_32013641/article/details/104029217

版权

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

在不修改DOM结构和JS代码的情况下，为modal元素添加全局遮罩或背景。通过CSS伪元素`:before`创建背景，但由于元素自身被遮挡，需要进一步调整。利用层叠上下文解决这个问题，实现理想效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题，现需要给modal元素增加一个全局遮罩或全局背景，要求不能修改DOM结构和修改JS代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS</title>
<style>
		.modal {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 50%;
			left: 50%;
			color:#fff;
			transform: translate(-50%,-50%);
			width: 320px;
			height: 240px;
			z-index: 1;
			background: red;
		}
</style>
</head>
<body>
 <div>某些元素</div>
  <div class="modal">已存在的元素</div>
</body>
</html>

在这里插入图片描述
可以考虑通过:before伪元素增加全局背景:

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>CSS</title>
	<style>
		.modal {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			top:20%;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 320px;
			height: 240px;
			z-index: 1;
			background: red;
		}
		.modal:before{
			content:"";
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index:-1;
			background: rgba(0,0,0,.5);
		}
	</style>
</head>
<body>
<div>某些元素</div>
<div class="modal">已存在的元素</div>
</body>
</html>

此时自身元素也被挡住了，显然不符合需求：
在这里插入图片描述
四处碰壁以及参考层叠上下文后得:

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>CSS</title>
	<style>
		.modal {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			top:20%;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 320px;
			height: 240px;
			z-index: 1;
			background: red;
		}
		.modal:before{
			content:"";
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index:-2;
			background: rgba(0,0,0,.5);
		}
		.modal:after{
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
			background: red;
		}
	</style>
</head>
<body>
<div>某些元素</div>
<div class="modal">已存在的元素</div>
</body>
</html>

最终呈现效果:
在这里插入图片描述
参考：http://www.w3.org/TR/CSS21/visuren.html#stack-level