CSS:未显示背景图像

Question

我在Vue.js应用程序中使用超文本标记语言和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>执行simliar。

如果不向该元素添加height属性，它将缩小到内容的最小高度。在本例中，它没有任何内容，这解释了为什么图像没有显示。