在 CSS 中设置 div 的背景图片答案

【问题标题】：Set background image of div in CSS在 CSS 中设置 div 的背景图片
【发布时间】：2023-03-07 01:05:01
【问题描述】：

我有一个用 html 和 css 编写的网页作为原型。现在我们正在使用 VueJS 来实现它。我想在主页上有一张图片作为背景。问题是我尝试在模板中创建一个div，然后从style 部分对其进行样式设置，但图片没有出现。我尝试在img标签中链接图片，它显示这意味着页面通过路由器正确链接，并且url是正确的。

这是我认为应该可以工作的代码：

.background {
  background-image: url(../assets/img/21.jpg);
  width: 100%;
}

<template>
      <div>
        <div class="background"></div>
      </div>
</template>

我尝试遵循here 给出的答案，但它们没有任何区别。

我是否遗漏了什么或者这里到底出了什么问题？

【问题讨论】：

它可以工作，但是你的 div 的高度是 0 所以......你可以看出里面什么都没有，css 也没有指定它的高度。
在背景 div 中添加一个词并查看背景图像。如上所述，您的 div 中没有内容，因此它不会在页面上直观显示

标签： css

【解决方案1】：

喜欢@N.B.说：div的高度不见了。 Fiddle

HTML：

<div>
  <div class="background"></div>
</div>

CSS：

.background {
  width: 100%;
  height: 50px;
  background-image: url(http://via.placeholder.com/1920x900);
}

请记住，只要您的父 div 的高度未设置，您的 div 的高度就不能为 100%。

如果您想要 100% 的宽度和高度，请使用 this

HTML：

<div class="template">
  <div class="background-parent">
    <div class="background"></div>
  </div>
</div>

CSS：

div.background-parent
{
  position: relative;
  width: 100%;
  height: 600px;
}
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(http://via.placeholder.com/1920x900);
}

【讨论】：