CSS遮罩效果

最新推荐文章于 2025-05-20 08:57:33 发布

原创最新推荐文章于 2025-05-20 08:57:33 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery & javaScript 同时被 2 个专栏收录

44 篇文章

订阅专栏

HTML & CSS

35 篇文章

订阅专栏

本文介绍了如何使用CSS创建全屏遮罩效果，通过绝对定位的div层覆盖整个屏幕，并利用z-index确保其位于页面最上方。内容涉及到position:fixed的浏览器兼容性问题，特别是IE6的处理方式，以及弹出层z-index的设置建议。

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

遮罩效果:

覆盖层作用:把焦点限制在高亮层。

原理:通过一个绝对定位的层(通常使用div)，设置它的高度和宽度以致能覆盖整个屏幕(包括缩放和滚动浏览器的情况下)，再给它设置一个比较高的z-index来层叠在原有内容之上，这样用户就只能点在这个层的内容上了。

前提浏览器须支持:position:fixed(跨浏览器固定定位，让一个元素可以随着网页的滚动而不断改变自己在浏览器中的位置).(IE6不支持)来形成全屏遮罩效果，否则自己添加样式，做一个覆盖全屏幕的div层(可以先做一个覆盖全屏的层，当改变窗口大小的时候再调整位置即可(js--onresize,jQuery-resize方法))。

position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;

弹出层的z-index尽量设置大点,以保证在页面的最上方。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑;}
	body{height:1000px;}
	.hit{position:fixed;top:0;left:0;width:100%;height:100%;background:#AFAFAF;filter:alter(opacity=10);opacity:0.1;	     z-index:99}
</style>
</head>
<body>
	<button>遮罩</button>
</body>
<script type="text/javascript">
	$("button").click(function(){
		$("body").prepend("<div class='hit'></div>");
	});
</script>
</html>