时间戳

首页 > 解决方案 > CSS：背景图片不显示

javascript - CSS：背景图片不显示

问题描述

我在 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>

标签： javascripthtmlcss

解决方案

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

添加如下所示的 CSS 规则：

template {
  height: 100%;
}

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

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

推荐阅读