效果图（背景为蓝色）：
<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="https://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><html>
<head>
<style>
*{
m
