Question

最近3天内，我一直在尝试使背景图片在CSS中工作。我过去可以使用它，但是现在不确定什么地方出错了。此时，我从W3C复制了一个英雄图像示例，但该示例也不起作用。我正在尝试使用background-image向页面添加标题。我确实喜欢英雄形象的想法，所以我想坚持下去。

我使用的第一组代码是：

header { background-image: url("banner.jpg"); }

<header>
 <h1>Donald Goines</h1>
</header>

就图片而言，这什么也没有呈现。 Donald Goines上来了。我还尝试了URL中的../images/banner.jpg，因为我意识到我确实将此图像放置在原始文件夹内的文件夹中。我验证了我所拥有的东西，但没有任何错误。

<body>
<div class="hero-image">
  <div class="hero-text">
    <h1>Donald Goines</h1>
    <p>Author</p>
  </div>
</div>
</body>

.hero-image {

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/banner.jpg");


  height: 50%;


  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

Answer 1

确保.hero-image的父级具有高度。我认为您的元素可能没有高度（假设图像的路径正确）。

Answer 2

检查文件夹结构。这可能是图像无法通过的原因。如果不知道文件夹结构，将很难查看CSS是否正确。在这里查看此线程。

CSS background-image - What is the correct usage?

Answer 3

从本质上讲，这是您开始使用的代码，但是最低高度为50vh而不是50%（50%中的0仍为0）。您的h1内容显示的原因是它占用了DOM中的实际空间。

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5)), url("https://images.unsplash.com/photo-1516836554245-938416faa6ee?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80");
  min-height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<div class="hero-image">
  <div class="hero-text">
    <h1>Donald Goines</h1>
    <p>Author</p>
  </div>
</div>

jsFiddle

Answer 4

header {
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.w3schools.com/w3css/img_lights.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<header>
  <h1>Donald Goines</h1>
</header>

<div class="hero-image">
  <div class="hero-text">
    <h1>Donald Goines</h1>
    <p>Author</p>
  </div>
</div>

Answer 5

这似乎与图像路径有关。试试-background-image：url（“ images / banner.jpg”）;

我似乎无法获得背景图像来渲染css中的任何内容

5 个答案: