本地CSS背景图像不显示

Question

我正在尝试在CSS中显示本地background-image。它与index.html位于同一文件夹中，并且不显示。

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

感谢任何帮助。

Answer 1

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

CSS无法做你认为的事情 - 这是件好事，因为我无法想到任何可能的用例。想象一下，这些页面都引用了style.css：

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

...如果引用style.css＆＃34; foo.jpg＆＃34;然后foo.jpg必须在/foo.jpg，/products/foo.jpg和/user/account/foo.jpg复制。

Answer 2

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

你应该在你的代码中执行此操作：

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

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

最后，图片可能无法加载到页面上，并且可能会刷新几次。

Answer 3

它没有显示，因为你没有给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');
}