CSS实现正在提交不可操作的遮罩效果

最新推荐文章于 2024-01-26 21:30:03 发布

原创最新推荐文章于 2024-01-26 21:30:03 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #遮罩层 #html

杂七杂八小功能专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个'正在提交不可操作'的遮罩效果。主要内容包括创建提示框和遮罩层的CSS样式，重点在于利用`position`和`z-index`控制元素的层级关系，以及`fixed`定位实现屏幕居中。通过调整透明度和背景色，完成全屏遮罩效果。

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

1.首先需要两个div，一个是位于遮罩上层的提示框(msg-content)，一个是位于页面内容上方的遮罩(mask)。

<div class="msg-content"></div>
<div class="mask"></div>

2.提示框样式

.msg-content {
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;
	z-index:999999;	
	display:none;	
	height:100px;
	width:300px;
	background-color:#ffffff;
}

其中，position为fixed是为了相对于浏览器定位，让提示框固定在相对于浏览器的某个位置，比如正中间。

fixed结合left,right,top,bottom的值即可根据浏览器定位。这里位置值全部设置为0px，然后加上margin：auto即可实现该div相对于浏览器的居中（不随滚动条滑动而变化）。

接下来，比较重要的就是设置其z-index，控制它所属的层级。注意，设置了z-index的同时必须设置position为非静态值，否则不会生效。即z-index的层叠关系仅对非静态元素生效。这里我对z-index做一个简单易懂的概括：

如果给浏览器画个坐标轴，横轴x，纵轴y，那么它只是一个二维平面。如果再添一个轴（z轴），那么页面上的元素就有了层级关系。但是很可惜，浏览器本身“不存在”这个z轴，若非要表示层级关系，只能给某些需要表示的关系一个标记：非静态元素(你可以理解为，他们不像静态元素那样老老实实的呆在平面上！)，有了这个标记，这些带有标记的元素就可以排成一个z轴。注意，是他们组成了z轴，而不是他们在z轴上定位。通过设置他们的z-index，就可以给他们进行相对的排序啦。

最后，对dix进行简单处理，设置背景色，宽高，隐藏（JS脚本再控制显示）就ok了。

遮罩的原理和提示框很像，代码如下：

3.遮罩层样式

.mask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: #000;
	opacity: .4;
	filter: alpha(opacity = 40);
	z-index: 10000;
	display:none;
}

注意，mask没有设置宽高，加上前五行的定位就是铺满全屏的效果。在设置透明度和背景色即可。遮盖层的z-index一定要比层下元素的z-index（如果有的话）大，比提示框的z-index小。

这样功能就可以实现了！但要注意，z-index和position联合控制层级的知识点没有我说的这么少，为了方便大家理解，我简单的做了下解释，想要深入了解的可以自行查下~