如何将CSS网址设置为绝对位置？

Question

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

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

在我的应用程序中,我有一个方法可以根据使用jQuery从前一个方法的下拉列表中进行的选择来更改背景DIV:

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

当我在我的页面的根目录时,所有这一切都很好.但是,我在应用程序中有一些链接使用哈希标记来导航页面(例如#MyHonor).当我导航到其中一个标签并调用上面的重置功能时,图像会中断.当我拉起Chrome Inspector查看DIV标签时,它表示它尝试加载的图像是"images/MyHonor/ClanSpider.png",它不存在.

我知道CSS url会在应用程序中引用它的位置生成链接,但是在应用程序中移动CSS文件的位置并不重要.

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

Answer 1

从阅读你对其他答案的评论,我认为你为自己创造了一个并不存在的问题.如果url('/images/ClanSpider.png')在上传到Web服务器时能够正常工作,那么诀窍是让它在本地工作时以相同的方式工作.到目前为止,这是最简单的方法,特别是如果你的焦点是一个离线应用程序,它几乎没有服务器端要求(我假设是真的,如你提到的file:///URI),就是运行本地Web服务器.

Python附带一个模块SimpleHTTPServer,如果安装了Python,那么启动它就像L5RHonor在命令提示符下转到项目目录并发出以下命令一样简单:

python -m SimpleHTTPServer

然后,而不是使用这样的URI访问您的文件:

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

你会像这样访问它们:

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

您的所有根相对文件路径现在都可以正常工作,这是一个额外的好处,离线缓存将在Chrome中正常工作,您将能够从命令提示符窗口中的日志中看到它正在请求并根据以下内容缓存正确的文件你的清单.

Answer 2

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

即使用:

url('/images/ClanSpider.png')

代替

url('images/ClanSpider.png')