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

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解决问题

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

Answer 2

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

Answer 3

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

例如

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