如何将 CSS url 设置为绝对位置? [英] How do I set a CSS url to an absolute location?

问题描述

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

I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:

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

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

In my app, I have a method that changes the background DIV based on a selection made in a dropdown list from a previous method using jQuery:

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

当我位于页面的根目录时，所有这些都可以正常工作.但是，我在应用程序中有一些使用哈希标签来导航页面的链接(例如#MyHonor).当我导航到这些标签之一并调用上面的重置功能时，图像会中断.当我打开 Chrome Inspector 查看 DIV 标签时，它说它尝试加载的图像是不存在的images/MyHonor/ClanSpider.png".

All of this works fine when I'm on the root of my page. However, I have some links within the app using hash tags to navigate the page (such as #MyHonor). When I've navigated to one of these tags and call my reset function above, the image breaks. When I pull up the Chrome Inspector to look at the DIV tag, it says that the image it is trying to load is "images/MyHonor/ClanSpider.png" which doesn't exist.

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

I know the CSS url will generate links in reference to its location within the application, but it doesn't matter where I move the CSS files in the application.

有没有一种方法可以让我重写 url 处理的结果，或者另一种指定 DIV 背景图像而不进行任何类型的服务器端处理的方法?理想情况下，此应用将通过 HTML5 的清单缓存功能运行，因此我将无法访问任何基于服务器的语言.

Is there a way for me to rewrite what comes out of the url processing or an alternate way of specifying the background image of the DIV without doing any kind of server side processing? Ideally this app will run through the manifest cache feature of HTML5, so I won't have access to any server based languages.

推荐答案

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

From reading through your comments on the other answers I think you're creating a problem for yourself that doesn't really exist. If url('/images/ClanSpider.png') is going to work when you upload to the web server then the trick is to make it work the same way when working locally. By far the easiest way to do this, especially if your focus is an offline app which has little in the way of server side requirements (which I'm assuming is true, as you mentioned file:/// URIs), is to run a local web server.

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

Python ships with a module SimpleHTTPServer, if you have Python installed then starting it is as simple as going to your L5RHonor project directory in a command prompt and issuing the following command:

python -m SimpleHTTPServer

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

Then instead of accessing your files with URIs like this:

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

您将像这样访问它们:

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

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

All your root relative file paths will now work correctly, as an added bonus the offline caching will work correctly in Chrome and you'll be able to see from the log in the command prompt window that it is requesting and caching the correct files according to your manifest.

这篇关于如何将 CSS url 设置为绝对位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！