背景图像在“样式”中工作，但不在css文件中

Question

我想制作精灵图片，这是我的css：

img.Bayern
{
   background: url(Images/Popular.png) no-repeat;
    width: 14px; height: 11px;background-position: 0 0;
}

和我的HTML：

<img class="Bayern"  />

但是图像没有显示，但是当我将css代码放在style =＆＃34;＆＃34; ，它运作正常。

我查看了类似的问题：CSS code works if put in style="", fails if put in external css file

确实把img放在了里面：

<span id="nav-flag">
   <img class="Bayern"  />
   </span>

 #nav-flag img.Bayern { ...same css...}

但它仍然无效。此外，我改变了相对路径：../ Images，./ Images，进入＆＃39; ...＆＃39;。 有谁知道我做错了什么？

Answer 1

您在背景图片Images/Popular.png上使用了相对网址（即网址不是以前导斜杠/开头，也不是以http://等方式开头。

在style属性中使用此类相对网址时，它相对于浏览器地址栏中显示的网页请求网址。因此，如果它是http://example.com/page.html，那么图像应该在http://example.com/Images/Popular.png中。

在CSS文件中使用这样的相对URL时，它相对于CSS文件本身的请求URL。因此，如果它是http://example.com/css/style.css，那么图像应该在http://example.com/css/Images/Popular.png中。

您需要确保图像文件正好在指定的URL所在的位置（因此，将其放在与CSS文件相同的文件夹中），或者您需要相应地修复URL以使其正确相对到请求网址（因此，请改用/Images/Popular.png）。

---

对具体问题

无关，在<img>元素上指定CSS背景图片是很奇怪的。您通常在某些块元素上指定<div>。