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

<!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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

*{
    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