在HTML中显示图像的问题
在HTML中显示图像的问题
提问于 2018-01-17 15:11:01
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
width: 100%;
}
.top {
width: 800px;
margin: 0 auto;
}
.topfixedimg{
background-repeat: no-repeat;
background-size: cover;
background-image: url("image.jpg");
background-position: center;
background-attachment: fixed;
width: 100%;
height: 85%;
}
</style>
</head>
<body>
<div class="top">
<div class="topfixedimg"> </div>
</div>
</body>
</html>如果我不在最外层的"top“div的CSS中添加height属性，上面的代码片段就不会显示图像。
如果我添加了高度，那么它会正确地显示图像。
它是否应该从内部div元素的CSS中获取高度，并仍然显示图像，即使在最外面的div元素的CSS中没有height属性？
回答 2
Stack Overflow用户
发布于 2018-01-17 15:13:02
85%的高度意味着父对象高度的85%。由于您没有为外部div指定任何高度，因此它的高度为0px，因此0的85%为0。
指定父项的高度，或以px、em、rem等格式指定内部div的高度。
#outer {
width: 100px;
height: 100px;
background: red;
}
#inner {
width: 100px;
height: 50%;
background: green;
}<div id="outer">
<div id="inner"></div>
<span>I'm just another element</span>
</div>
Stack Overflow用户
发布于 2018-01-17 15:17:06
topfixedimg类的高度为85%。这意味着显示该元素的父元素的85% (在本例中是‘top’div。
因为‘top’div没有设置高度，所以它的高度是0。所以0的85%等于0。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48295465
复制相关文章
相似问题
腾讯云开发者
