老师，为什么我这个遮罩是100%高度但是没占满图片呢？

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

这是html：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" charset="UTF-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!--页头-->
<div class="header-box">
<div class="logo"><a href="#"><img src="images/logo.png"/></a></div>
<ul class="nav">
<li><a href="#">CONTACT</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOME</a></li>
</ul>
</div>
<!--主体-->
<div class="body-box">
<div class="banner-box">
<div><img src="images/banner3.jpg"/></div>
<div class="opci_"></div>
<form>
<input>
<input>
<input>
<textarea></textarea>
<button>SEED MASSAGE</button>
</form>
</div>
</div>
<!--页尾-->
<div></div>
</body>
</html>
-------------------------------------------------------------------------------------
这是css：
*{
    margin:0;
    padding:0;
}
/*页头部分css*/
.header-box{
    width:100%;
    height:80px;
    background:#07cbc9;
    overflow:hidden;
    position:fixed;
    z-index:2;
    border:2px blue solid;
}
.logo{
    width:260px;
    height:48px;
    float:left;
    margin-left:100px;
    margin-top:16px;
}
.nav{
    float:right;
    list-style-type:none;
    overflow:hidden;
    margin-right:90px;
}
.nav li{
    float:left;
    line-height:80px;
    margin-right:10px;
    margin-left:10px;
}
.nav li a{
    text-decoration:none;
    color:#ffffff;
    font-weight:bolder;
}
.nav li a:hover{
    color:orange;
}
/*Nanner区、遮罩、表单部分*/
.body-box{
    width:100%;
}
.banner-box{
    width:100%;
}
.banner-box img{
    width:100%;
    top:80px;
}
.opci_{
    width:100%;
    height:100%;
    background-color:#000;
}

不会敲代码的小浩子 2019-03-27

源自：项目：网页布局案例 2-10 作业题

2

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-03-27 11:21:57

你好，按照文档排列顺序，遮罩层会在图片下方显示，不会显示在图片上面遮盖住。

并且父元素没有设置高度，遮罩层设置高度为100%是没有高度的，所以也看不到效果。可以说会永恒定位完成，让遮罩层设置相对于banner区域进行定位，参考：

可以参考上面的建议测试下，祝学习愉快！

不会敲代码的小浩子提问者 #1

谢谢，已经明白了，就是高度必须设置才行，对不对？

2019-03-27 11:39:27
好帮手慕星星回复提问者不会敲代码的小浩子 #2

是的，如果子元素设置高度为100%，那么父元素是需要设置高度的。

2019-03-27 11:53:31

相似问题

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

为什么遮罩会随着页面的缩小而变小怎么处理呢

我的遮罩层高度设置为什么不起作用

辛苦老师检查我的作业。另外。老师，我不知道遮罩层是什么

请问老师渐变遮罩

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号