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

只是将我的评论写为答案，因为这有助于OP解决问题

在你的css文件中尝试url(Images/bookone.jpg)

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

Answer 3

看起来您想要的图像作为背景位于远离CSS所在的另一个文件夹中。我建议你从HTML代码中分配背景图像。使用正斜杠（/）而不是反斜杠（\）。

E.G

<div id="bookone" class="book" style="background: (url('/myimage/bg.jpg')"></div>

或在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;
}

为什么我的背景图像不显示？

3 个答案: