CSS：背景图像未显示

Question

我在 Vue.js 应用程序中使用 HTML 和 CSS 应用程序，我的问题是下面全宽的背景图像在没有写入文本的情况下不显示，并且它调整了添加的文本，它显示为一半的高度（图像），即使我添加了一行文本，有没有办法以全高显示全宽图像？

 <template> <b-container fluid> <div class="image"> <b-row class="justify-content-center"> <b-col cols="4"> <h2>Overview</h2> <p>text.....</p> </b-col> </b-row> </div> <div class="image-bottom"> <b-row class="justify-content-center"> </b-row> </div> <router-view /> </b-container> </template> <style scoped>.image{ background-image: url("../assets/images/contact.png"); background-repeat: no-repeat; background-size: cover; }.image-bottom{ background-image: url("../assets/images/contact-bottom1.png"); background-repeat: repeat; min-height: 100%; background-size: cover; } </style>

Answer 1

使<template>容器成为页面的整个高度应该可以解决问题。

添加一个 CSS 规则，如下所示：

template {
  height: 100%;
}

确保对要添加此图像的实际<div>执行类似操作。

如果不向该元素添加高度属性，它将缩小到内容的最小高度。 在这种情况下，它没有解释为什么图像没有出现。