背景图片未显示-，-

Question

背景图片没有显示...（如果有，我也有一个导航栏吗？很重要）

• 目录https://i.stack.imgur.com/n1W2k.png

这是我现在拥有的当前代码：

<div class="page-wrapper">
    <div class="div-page-image">

    </div>
</div>

.page-wrapper {
    height: 100%;
}

.div-page-image {
    background-image: url('./pictures/city.png');
    width: 100%;
    height: 20%;
}

Answer 1

如果要使用百分比作为身高，则可以添加一点（：after），然后根据所需比例设置填充。

.page-wrapper {
    height: 100%;
}

.div-page-image {
    background-image: url('https://source.unsplash.com/random');
    background-size: cover;
    background-repeat: no-repeat;
}

.div-page-image:after {
   content: "";
   padding-top: 65%;
   display: block
}

<div class="page-wrapper">
    <div class="div-page-image">

    </div>
</div>