不显示本地CSS背景图像

Question

我试图在CSS中显示本地background-image。它位于index.html所在的文件夹中，并且不显示。

.image { 
     width:100px; 
     background-image: url('PIC1.jpg'); 
    } 

任何帮助表示赞赏。

Answer 1

它没有出现，因为你没有给任何高度到div看到这个http://jsfiddle.net/ce1j6k7k/2/可以删除高处看差

HTML

<div id="image"></div> 

CSS

#image{ 
width:300px; 
height:300px; 
background-image:url('http://placekitten.com/300/301'); 
} 

Answer 2

CSS中指定的资源是相对于CSS文件的路径而不是引用CSS文件的页面解析的。 PIC1.jpg必须位于与CSS文件本身相同的目录/文件夹中。

CSS没有办法做你认为它的事情 - 这是件好事，因为我想不出任何可能的用例。想象一下，这些页面所有引用style.css：

/index.html 
/products/fish.html 
/user/account/orderHistory 

...如果style.css引用 “foo.jpg” 然后foo.jpg将不得不在/foo.jpg，/products/foo.jpg和/user/account/foo.jpg被复制。

Answer 3

我能想到3个可能的问题。 首先，图像路径。例如，如果这是你的形象真实路径： d：\项目\ MyProject的\内容\图片\ PIC1.jpg

，你应该在你的代码做到这一点：

background-image: url('~\Content\Images\PIC1.jpg'); 

其次，是宽度您在代码中设置的图像与图像的坐标不匹配。在这种情况下，您可以更改代码或重新调整图像大小。

最后，图像可能没有加载到页面上，并刷新它可能显示几次。