Html 如何将 CSS url 设置为绝对位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4184686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set a CSS url to an absolute location?
提问by Dillie-O
I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:
我正在开发一个 HTML5 移动应用程序，我最初通过 CSS 设置了一个 DIV 项目的背景，如下所示：
background-image: url('images/ClanSpider.png');
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:
在我的应用程序中，我有一种方法可以根据使用 jQuery 的先前方法的下拉列表中所做的选择更改背景 DIV：
function ResetMyHonor()
{
ClanImage = 'images/Clan' + MyClanName + '.png';
$("#MyClanName").html(MyClanName);
$("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}
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.
当我位于页面的根目录时，所有这些都可以正常工作。但是，我在应用程序中有一些使用哈希标签来导航页面的链接（例如#MyHonor）。当我导航到这些标签之一并调用上面的重置功能时，图像会中断。当我打开 Chrome Inspector 查看 DIV 标签时，它说它尝试加载的图像是不存在的“images/MyHonor/ClanSpider.png”。
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.
我知道 CSS url 会根据它在应用程序中的位置生成链接，但是我将 CSS 文件移动到应用程序中的位置并不重要。
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 处理的结果，或者另一种指定 DIV 背景图像的方法，而无需进行任何类型的服务器端处理？理想情况下，此应用程序将通过 HTML5 的清单缓存功能运行，因此我将无法访问任何基于服务器的语言。
采纳答案by robertc
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.
通过阅读您对其他答案的评论，我认为您正在为自己创造一个并不存在的问题。如果url('/images/ClanSpider.png')在您上传到 Web 服务器时要工作，那么诀窍是在本地工作时使其工作方式相同。到目前为止，最简单的方法file:///是运行本地 Web 服务器，特别是如果您的重点是对服务器端要求几乎没有影响的离线应用程序（我假设这是真的，正如您提到的URI）。
Python ships with a module SimpleHTTPServer, if you have Python installedthen starting it is as simple as going to your L5RHonorproject directory in a command prompt and issuing the following command:
Python 附带一个模块SimpleHTTPServer，如果您安装了Python，那么启动它就像L5RHonor在命令提示符下进入您的项目目录并发出以下命令一样简单：
python -m SimpleHTTPServer
Then instead of accessing your files with URIs like this:
然后，而不是使用这样的 URI 访问您的文件：
file:///H:/Projects/L5RHonor/images/ClanSpider.png
You will access them like this:
您将像这样访问它们：
http://localhost:8000/images/ClanSpider.png
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.
您的所有根相对文件路径现在都可以正常工作，作为额外的好处，离线缓存将在 Chrome 中正常工作，您将能够从命令提示符窗口中的日志中看到它正在请求并根据以下内容缓存正确的文件你的清单。
回答by Andrew M
Try putting a leading slash on those paths to represent the root.
尝试在这些路径上放置一个前导斜杠来表示根。
ie use:
即使用：
url('/images/ClanSpider.png')
instead of
代替
url('images/ClanSpider.png')
回答by Pekka
The simplest solution is obviously adding a slash to the URL to make it absolute. That will work fine, but it makes it impossible to move the application into a sub-directory, or to move static resources to a different server. If that is a problem, there are various alternative ways.
最简单的解决方案显然是在 URL 中添加斜杠以使其成为绝对值。这会正常工作，但无法将应用程序移动到子目录中，或将静态资源移动到不同的服务器。如果这是一个问题，有多种替代方法。
If the number of possible background images is finite, you could define every one in a class of its own:
如果可能的背景图像数量有限，您可以在自己的类中定义每一个：
.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); }
...
and then do an .addClass()to set the correct image.
然后做一个.addClass()设置正确的图像。
Other than that, as far as I know, there is no way to specify a path relative to the style sheet (rather than the current document) when setting a background image path in Javascript. You would have to work with absolute paths, or define a root path in JavaScript, and use that:
除此之外，据我所知，在 Javascript 中设置背景图像路径时，无法指定相对于样式表（而不是当前文档）的路径。您必须使用绝对路径，或在 JavaScript 中定义根路径，然后使用它：
// in the script head
imageRoot = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');
回答by Quentin
The location of the CSS file is irrelevant, you are modifying the .styleproperty of an HTML element. This is the same as using the style attribute.
CSS 文件的位置无关紧要，您正在修改.styleHTML 元素的属性。这与使用 style属性相同。
As this is CSS embedded in the document, all URIs are relative to the document.
由于这是嵌入在文档中的 CSS，所有 URI 都是相对于文档的。
You probably want to start the URL with a /, or if you really want the absolute location specified in your question: http://
您可能希望以 开头 URL /，或者如果您真的想要问题中指定的绝对位置：http://
回答by Niet the Dark Absol
Try adding a /at the start of the URL?
尝试/在 URL 的开头添加一个？
