html - 为什么我的背景图片不显示？

Question

我无法在 div 中显示背景图像，而且我终究无法理解为什么...

这是我的结构:

Folder
      \style.css
      \index.html
      \Images
             \bookone.jpg

我想将 bookone.jpg 文件作为 div 的背景。因此 CSS 路径为 Folder/style.css，图像路径为 Folder/Images/bookone.jpg。我的 html 和 css 文件中有以下代码，但在预览时我什么也没得到。

/* CSS */

.book {
  height: 300px;
  width: 300px;
  margin: 0px;
  padding: auto;
  border: 1px solid #000;
}

#bookone {
  background: url(..\Images\bookone.jpg) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

<!-- HTML -->

<div id="bookone" class="book"></div>

Answer 1

1. 您应该使用斜杠 (/) 而不是反斜杠 (\)。
2. 您应该确保图像位于正确的路径中(相对于当前的 css/html 文件)。如果图像存在于您的 css 文件(或您的 html 文件)的相同位置，您不应该使用 ..，因为它实际上告诉您的浏览器在上层文件夹中搜索该图像.

这是您可能应该使用的最终 CSS 代码:

.book {
  height: 300px;
  width: 300px;
  margin: 0px;
  padding: auto;
  border: 1px solid #000;
}

#bookone {
  background: url(Images/bookone.jpg) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}