0

我想制作一个精灵图像，这是我的 css：

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

和我的html：

<img class="Bayern"  />

但是图像没有显示，但是当我将 css 代码放在 style="" 中时，它可以正常工作。

我检查了这个类似的问题：CSS code works if put in style="", failed if put in external css file

并把 img 放进去：

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

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

但它仍然不起作用。我也将相对路径更改为：../Images，./Images，变为'...'。有谁知道我做错了什么？

4

1 回答 1

2

您在背景图像上使用了相对 URL Images/Popular.png（即，该 URL 不是以斜杠开头，/也不是类似 的方案http://）。

在style属性中使用这样的相对 URL 时，它相对于浏览器地址栏中显示的网页的请求 URL。因此，如果它是例如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，以便它与请求正确相关URL（因此，请/Images/Popular.png改用）。

与具体问题无关<img>，在元素上指定 CSS 背景图像是很奇怪的。您通常会在某些块元素上指定它，例如<div>.

于 2013-01-05T17:17:27.600 回答