遮罩层。总是大出那么一些。。这是为啥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/demo.css">
</head>
<body>
    <div class="top">
        <img src="images/logo.png" alt="">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">FACULTY</a></li>
            <li><a href="#">EVENTS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
    <div class="banner">
        <div class="shade"></div>
        <img src="images/banner3.jpg" alt="">
        <div class="form_data">
            <input type="text" placeholder="Your Name" class="input_info">
            <input type="text" placeholder="Your Phone" class="input_info">
            <input type="text" placeholder="Your Email" class="input_info">
            <textarea name="" id="" cols="30" rows="10" placeholder="Your Content"></textarea>
            <input type="button" name="" id="" value="SEND MESSAGE">
        </div>
    </div>
    <div class="about"></div>
    <div class="gallery"></div>
    <div class="footer"></div>
</body>
</html>

*{
    margin:0;
    padding: 0;
}

.top{
    background-color:#07cbc9;
    height: 60px;
    width: 100%;
}
.top img{
    margin-left:60px;
    margin-top:5px;
}

.top ul{
    float: right;
    list-style: none;
    margin-right: 60px;
    margin-top:20px;
}

.top ul li{
    float: left;
    margin-right: 20px;
}

.top ul li a{
    font-family:"Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size:13px;
    font-weight: bold;
    color:white;
    text-decoration: none;
}

.banner{
    position:relative;
    width: 100%;
    height:100%;

}

.banner img{
    width:100%;

}

.banner .shade{
    background-color: rgba(0,0,0,0.4);
    position:absolute;
    float:left;
    width:100%;
    height:100%;

}

.banner .form_data{
    position:absolute;
    top:25%;
    left:30%;
    text-align: center;
    height: 700px;
    width: 40%;

}

.banner .form_data input[type="text"]{
    float:left;
    width:100%;
    background-color: transparent;
    border: 1px solid white;
    padding-left:10px;
    height: 40px;
    margin-bottom: 20px;
    color:white;
    box-sizing:border-box;
    font-size: 18px;
}

.banner .form_data input[type="text"]:hover{
    border: 1px solid #07cbc9;
}



input::-webkit-input-placeholder {
    color:white;
}
input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: white;
}
input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: white;
}
input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: white;
}
textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color:white;
}
textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color:white
}
textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color:white
}
textarea::-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color:white;
}

.banner .form_data textarea{
    border: 1px solid white;
    resize: none;
    display: block;
    background-color:transparent;
    width: 100%;
    padding-left:10px;
    padding-top:5px;
    box-sizing:border-box;
    color:White;
    font-size: 18px;
    font-family:"Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
}

.banner .form_data textarea:hover{
    border: 1px solid #07cbc9;
}

遮罩层总是大出图片一些，我没搞懂为啥

XO鸡丝 2019-06-09

源自：前端油画商城案例 4-3 项目作业

收起

2回答

好帮手慕阿满 2019-06-09 15:35:19

同学你好，这个可能是图片自带的边框造成的。同学设置图片和阴影部分具体的高度相同即可避免这种情况。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

收起回答

提问者 XO鸡丝 #1

我图片用的是自适应宽度。 width: 100%; height:100%; 遮罩层也是。 width:100%; height:100%; 所以你说的高度相同，没理解。

2019-06-09 15:37:10
好帮手慕阿满回复提问者 XO鸡丝 #2

同学你好，设置100%是可以的，但是图片本身自带了边距造成阴影部分比图片大，这里同学可以设置具体的高度，比如600px，图片和阴影的高度相同，就不会出现阴影部分比图片大的效果了。祝：学习愉快～

2019-06-09 18:47:10