CSS+JQuery实现遮罩层淡入淡出的效果

最新推荐文章于 2025-05-29 09:08:58 发布

原创最新推荐文章于 2025-05-29 09:08:58 发布 · 4.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

WEB前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在移动设备页面上实现遮罩效果的方法，使用了HTML、CSS和jQuery来创建一个全屏覆盖的黑色透明遮罩，并通过点击事件控制其显示与隐藏。

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

效果图（背景为蓝色）：

<html>
<head>
<style>
*{
	margin: 0;
	padding: 0;
}
#div{
	background-Color:#36c;
	width:100%;
	height: 100%;
}
.ts_mask{ 
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	position:fixed;
	z-index:99; 
	top:0; 
	display:none;
}
.tishi{ 
	width:70%;
	height:50vw; 
	background:url(mxz_ts.png) center no-repeat; 
	float:left; 
	background-size:100% auto;
	margin:50vw 15%;
}
.qd{ 
	width:50%; 
	height:10vw; 
	margin:30vw 25% 0 25%;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="div">
	<div class="ts_mask">
        <div class="tishi">
            <div class="qd"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
	$(".ts_mask").fadeIn(1000);
        $(".qd").click(function () {
        $(".ts_mask").fadeOut(1000);
    });
</script>
</body>
</html>

.ts_mask的作用为遮罩覆盖整个页面颜色黑色透明度0.8（background:rgba(0,0,0,0.8);）位于最上面（z-index:99）

.qd响应区域

(注意：本例是基于移动设备的页面编写，在电脑上可能显示可能出现只显示一部分，解决方法：在Firefox的页面中按shift+ctrl+m可以使页面呈现出在手机端显示的效果)