如何将 CSS url 设置为绝对位置？

Question

我正在开发一个 HTML5 移动应用程序，最初通过 CSS 设置 DIV 项目的背景，如下所示：

background-image: url('images/ClanSpider.png');

在我的应用程序中，我有一种方法可以根据下拉列表中的选择来更改背景 DIV以前使用 jQuery 的方法：

function ResetMyHonor()
{       
   ClanImage = 'images/Clan' + MyClanName + '.png';
   $("#MyClanName").html(MyClanName); 
   $("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}

当我位于页面的根目录时，所有这些都可以正常工作。但是，我在应用程序中有一些使用井号标签来导航页面的链接（例如#MyHonor）。当我导航到这些标签之一并调用上面的重置函数时，图像会损坏。当我拉出 Chrome 检查器查看 DIV 标签时，它显示它尝试加载的图像是“images/MyHonor/ClanSpider.png”，但该图像不存在。

我知道 CSS url 将生成引用其在应用程序中的位置的链接，但我将 CSS 文件移动到应用程序中的位置并不重要。

有没有办法让我重写 url 处理的结果，或者指定 DIV 背景图像的替代方法，而不进行任何类型的服务器端处理？理想情况下，这个应用程序将通过 HTML5 的清单缓存功能运行，因此我将无法访问任何基于服务器的语言。

Answer 1

尝试在这些路径上放置一个前导斜杠来表示根。

即使用：

url('/images/ClanSpider.png')

而不是

url('images/ClanSpider.png')

Answer 2

通过阅读您对其他答案的评论，我认为您正在为自己制造一个实际上并不存在的问题。如果 url('/images/ClanSpider.png') 在您上传到网络服务器时可以正常工作，那么技巧就是让它在本地工作时以相同的方式工作。到目前为止，这是最简单的方法，特别是如果您的重点是离线应用程序，而服务器端要求很少（我假设这是真的，正如您提到的 file:/// URIs），是运行本地Web服务器。

Python 附带了一个模块 SimpleHTTPServer，如果您已安装了 Python，则开始它就像在命令提示符中转到 L5RHonor 项目目录并发出以下命令一样简单：

python -m SimpleHTTPServer

然后，不要使用这样的 URI 访问文件：

file:///H:/Projects/L5RHonor/images/ClanSpider.png

您将像这样访问它们：

http://localhost:8000/images/ClanSpider.png

所有根相对文件路径现在可以正常工作，作为额外的好处，离线缓存将在 Chrome 中正常工作，您将能够从命令提示符窗口中的日志中看到它正在根据您的清单请求和缓存正确的文件。

Answer 3

最简单的解决方案显然是在 URL 中添加斜杠以使其绝对。这可以正常工作，但无法将应用程序移动到子目录中，或将静态资源移动到不同的服务器。如果这是一个问题，有多种替代方法。

如果可能的背景图像数量是有限的，您可以将每个背景图像定义在其自己的类中：

.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); } 
...

然后执行 .addClass() 来设置正确的图像。

除此之外，据我所知，在Javascript中设置背景图像路径时，没有办法指定相对于样式表（而不是当前文档）的路径。您必须使用绝对路径，或者在 JavaScript 中定义根路径，然后使用它：

// in the script head
imageRoot  = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');

Answer 4

CSS 文件的位置无关紧要，您正在修改 HTML 元素的 .style 属性。这与使用样式属性相同。

由于这是嵌入在文档中的 CSS，因此所有 URI 都相对于文档。

您可能希望以 / 开头 URL，或者如果您确实想要在问题中指定绝对位置：http://

Answer 5

尝试在 URL 开头添加 / 吗？