Question

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

这是我认为应该起作用的代码：

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

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

我试图按照给出的here的答案进行操作，但是它们没有任何区别。

我错过了什么吗？或者这里到底是什么问题？

Answer 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);
}

在CSS中设置div的背景图片

1 个答案: