Using relative URL in CSS file, what location is it relative to?
When defining something like a background image URL in a CSS file, when using a relative URL, where is it relative to? For example:
Suppose the file /stylesheets/base-styles.css contains:
div#header {
background-image: url('images/header-background.jpg');
}
If I include this style-sheet into different documents via <link ... /> will the relative URL in the CSS file be relative to the stylesheet document in /stylesheets/ or relative to the current document it's included to? Possible paths like:
/item/details.html
/about/index.html
/about/extra/other.html
/index.html
According to W3:
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document
Therefore, in answer to your question, it will be relative to /stylesheets/ .
If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardising it to the CSS file means that the URLs will work wherever the stylesheets are linked.
这是相对于CSS文件。
It's relative to the stylesheet, but I'd recommend making the URLs relative to your URL:
div#header {
background-image: url(/images/header-background.jpg);
}
That way, you can move your files around without needing to refactor them in the future.
链接地址: http://www.djcxy.com/p/31846.html上一篇: 未加引号的数据URI在CSS中有效吗？