为什么遮罩会随着页面的缩小而变小 怎么处理呢
<!DOCTYPE html>
<html>
<head>
<title>页面布局</title>
<meta charset="utf-8"/>
<link rel = "stylesheet" href ="CSS/index.css" />
</head>
<body>
<!--头部-->
<div class ="header">
<div class="logo">
<img src="image/logo.png" alt="logo" />
</div>
<div class="nav">
<ul>
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<!--main最上面那部分-->
<div class="top">
<img src="image/1.jpeg"/>
</div>
<!--遮罩层-->
<div class="toplayer"></div>
<div class="toplayer-top">
<div class="word">MY BEAUTIFUL LIFE</div>
<button>LOOK MORE ></button>
</div>
<!--main中间那部分-->
<div class="middle">
<div class="m-top">
<div class="common weibo">
<img src="image/weibo.png" />
<div class="comm">MICROBLOG</div>
</div>
<div class="common weixin">
<img src="image/weixin.png" />
<div class="comm">WECHAT</div>
</div>
<div class="common QQ">
<img src="image/QQ.png" />
<div class="comm">QQ</div>
</div>
<div class = "clear"></div>
</div>
<div class="m-middle">
"I want to give things to record down<br>after recall will be very beautiful."
</div>
<div class="m-bottom">
<div class="m-com">
<img src="image/03-01.jpg"/>
<div class="des1">Cool Image</div>
<div class="des2">record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-02.jpg"/>
<div class="des1">Cool Image</div>
<div class="des2">record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-03.jpg"/>
<div class="des1">Cool Image</div>
<div class="des2">record The Picture</div>
</div>
</div>
</div>
<div class="clear"></div>
<!--main下面那部分-->
<div class="bottom">
<div class="content">
<div class="title">FROM THE PHOTO ALBUM</div>
<div class="pic-content">
<!--图片的混排-->
<dl>
<dt><img src="image/04-01.jpg"/></dt>
<dd class="word">三国时期前，曹操的实力很强大。刘备在还没有做皇帝之前，被迫依附于亲戚刘表的军队阵容，并且驻守新野这地方。可是刘备是个胸怀大志的人，他并不想长久寄人篱下，只做别人的军师。正好这个时候徐庶向他推荐诸葛亮是个难得的好人才，徐庶劝刘备一定要网罗诸葛亮。</dd>
</dl>
<dl>
<dt><img src="image/04-02.jpg"/></dt>
<dd class="word">为了请诸葛亮协助自己获得天下，刘备曾经三次亲自到他住的茅庐(今襄阳古隆中，)拜访他，诸葛亮看到刘备非常诚恳，最后才同意与刘备见面。刘备向他请教许多治理国家的方法，诸葛亮仔细分析了当时的情势，建议刘备先占据荆州，这样才能有机会和曹操、孙权鼎足而立，互相抗衡</dd>
</dl>
</div>
<div class ="clear"></div>
</div>
</div>
</div>
<!--底部-->
<div class= "footer">
这是底部的内容
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
/*头部样式设计*/
.main,body{min-width:1000px;}
.header{
min-width:1000px;
width:100%;
height:100px;
background-color:#eee;
}
.header img{
width:300px;
height:85px;
padding-left:100px;
padding-top:8px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav ul{
padding-right:80px;
text-align:center;
}
.header .nav ul li{
float:left;
list-style:none;
width:80px;
height:100px;
line-height:100px;
font-size:15px;
font-weight:bolder;
color:#7d7d7d;
}
/*主体样式设计*/
/*main-top样式设计*/
.main .top{
width:100%;
height:600px;
}
.main .top img{
width:100%;
height:600px;
}
/*遮罩层*/
.main .toplayer{
position:absolute;
top:100px;
left:0;
background-color:#000;
width:100%;
height:600px;
opacity:0.5;
}
/*遮罩层 上层的文字部分*/
.main .toplayer-top{
width:500px;
height:300px;
position:absolute;
top:400px;
margin-top:-150px;
left:50%;
margin-left:-250px;
z-index:2;
}
.main .toplayer-top .word{
padding-top:100px;
font-size:45px;
font-weight:bold;
text-align:center;
font-family:"微软雅黑";
color:#fff;
}
/*遮罩层 上层的按钮部分*/
.main .toplayer-top button{
width:200px;
height:60px;
margin-top:50px;
color:#fff;
font-family:"微软雅黑";
background-color:#f5704f;
text-align:center;
font-weight:bold;
font-size:14px;
border-radius:8px;
margin-left:150px;
}
/*main-middle-top样式设计*/
.main .middle{
width:1000px;
margin:0 auto;
}
.main .middle .m-top .common{
float:left;
width:33.3%;
padding-top:50px;
text-align:center;
}
.main .middle .m-top .common img{
width:100px ;
height:100px;
}
.main .middle .m-top .common .comm{
font-size:20;
font-family:;
color:#7d7c7f;
font-weight:bold;
padding-top:20px;
}
/*main-middle-middle样式设计*/
.main .middle .m-middle{
font-size:22px;
color:#e19796;
font-weight:bold;
text-align:center;
padding-top:50px;
padding-bottom:50px;
font-style:italic;
}
/*清除浮动*/
/*方法一 在html中用一个空div 来清除浮动*/
.clear{
clear:both;
}
/*main-middle-middle样式设计*/
.main .middle .m-bottom .m-com{
float:left;
padding:10px;
text-align:center;
}
.main .middle .m-bottom .m-com img{
width:310px;
height:260px;
}
.main .middle .m-bottom .m-com .des1{
font-size:20px;
font-weight:bold;
color:#7d7d7f;
padding-top:20px;
}
.main .middle .m-bottom .m-com .des2{
font-size:20px;
font-weight:bold;
color:#bdbdbc;
padding-top:10px;
}
/*main-middle-bottom样式设计*/
.main .bottom{
background-color:#f9f9f9;
}
.main .bottom .content{
width:1000px;
margin:0 auto;
}
.main .bottom .content .title{
text-align:center;
font-size:20px;
font-weight:bold;
color:#7d7c7f;
width:1000px;
font-family:"微软雅黑";
padding-top:50px;
padding-bottom:50px;
}
.main .bottom .content .pic-content dl{
float:left;
width:470px;
margin:10px 12px;
}
.main .bottom .content .pic-content dl img{
width:470px;
height:460px;
}
.main .bottom .content .pic-content dl .word{
font-size:20px;
padding-top:20px;
font-weight:bold;
color:#7d7c7f;
padding-bottom:50px;
}
.footer{
width:100%;
height:100px;
background-color:#292c35;
text-align:center;
line-height:100px;
font-size:15px;
color:white;
font-family:"微软雅黑";
}
正在回答
你好，.main,body中设置了最小宽度min-width:1000px。导致缩小小于1000px时，图片不在缩小，但是遮罩还在缩小，这里给遮罩也设置最小宽度min-width:1000px;即可。祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星