Question

<!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属性？

Answer 1

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>

Answer 2

topfixedimg类的高度为85％。这意味着显示该元素85％的父元素（在这个例子中是'top'div。

由于'top'div没有设置高度，因此它的高度为0.因此0的85％为0.

在HTML中显示图像的问题

2 个答案: