背景图片未显示

Question

我正在尝试在CSS中显示背景图像，并已使用图像的相对路径。我尝试使用其他浏览器，但似乎无济于事。 下面是我的HTML。

<header>
  <h2><a href="#">Rachel Doyle Studio</a></h2>
  <nav>
    <li><a href="#">Home</a></li>
    <li><a href="#">Embroidery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </nav>
</header>
<section class="thimble">
  <div class="background-image" style="background-image: url(assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)"></div>

  <div class="thimble-content-area">
    <h1>Rachel Doyles Studio</h1>
  </div>
</section>

及以下是背景图像类的CSS样式。

.thimble background-image {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}

我已附上文件结构的图片。

即使我有正确的jpeg路径，为什么也要这样做？

Answer 1

您在 background-image 类名之前缺少一个点：

.thimble .background-image {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}

Answer 2

您可以使用此代码

body {
  margin: 0;
}

.thimble .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url('https://www.w3schools.com/images/picture.jpg');
  background-repeat: no-repeat;
  z-index: -1;
}

<header>
  <h2><a href="#">Rachel Doyle Studio</a></h2>
  <nav>
    <li><a href="#">Home</a></li>
    <li><a href="#">Embroidery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </nav>
</header>
<section class="thimble">
  <div class="background-image"></div>
  <div class="thimble-content-area">
    <h1>Rachel Doyles Studio</h1>
  </div>
</section>

Answer 3

我认为您需要在指定的路径上添加 ../

<div class="background-image" style="background-image: url(../assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)"></div>

现在应该可以了。

Answer 4

基于给出的代码，我也不认为背景图像需要单独的div。如果将背景图像直接放在.thimble上，则无需定位它：

  savepoint -->
    SavepointV2Serializer.deserialize -->
      write to json -->
        manually inspect / edit the files, or
        other tooling that works with json to inspect / modify
    SavepointV2Serializer.serialize -->
  new savepoint

.thimble {
  background-size: cover;
}