<!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 中没有高度属性吗？
最佳答案
85% height 表示父高度的 85%。由于您没有为外部 div 指定任何高度，因此它的高度为 0px，因此 0 的 85% 为 0。
要么指定父级的高度，要么指定内部div的高度，单位为px、em、rem等
#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> 关于html - 在 HTML 中显示图像的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48295465/