在CSS文件中使用相对URL,它相对于什么位置?

在CSS文件中定义背景图像的URL时,使用相对URL时,它与哪个相对? 例如:

假设文件/stylesheets/base-styles.css包含:

 div#header { background-image: url('images/header-background.jpg'); } 

如果我通过<link ... />将这个样式表包含在不同的文档中,那么CSS文件中的相对URL是相对于 /stylesheets/ 的样式表文档还是相对于它所包含的当前文档 ? 可能的path,如:

 /item/details.html /about/index.html /about/extra/other.html /index.html 

根据W3 :

部分URL相对于样式表的来源进行解释,而不是相对于文档

因此,在回答你的问题时,它将相对于/stylesheets/

如果你考虑这个问题,这是有道理的,因为CSS文件可以被添加到不同目录中的页面,因此将其标准化为CSS文件意味着URL可以在样式表链接的任何地方工作。

这是相对于CSS文件。

这是相对于样式表,但我build议使URL相对于您的url:

 div#header { background-image: url(http://img.dovov.comheader-background.jpg); } 

这样,您可以移动文件而无需在将来重构它们。

为了创build不依赖资源绝对位置的模块化样式表,作者可以使用相对URI。 相对URI(如[RFC3986]中定义的)使用基本URIparsing为完整的URI。 RFC 3986第5节定义了这个过程的规范algorithm。 对于CSS样式表,基本URI是样式表的基本URI,而不是源文档的URI。

例如,假设以下规则:

 body { background: url("yellow") } 

位于由URI指定的样式表中:

 http://www.example.org/style/basic.css 

源文档的BODY的背景将与由URI指定的资源所描述的任何图像平铺

 http://www.example.org/style/yellow 

用户代理在处理指定不可用或不适用资源的无效URI或URI方面可能会有所不同。

采取CSS 2.1规范 。

对于CSS样式表,基本URI是样式表的基本URI,而不是源文档的URI。

(别的什么都会被打破,IMNSHO)

一个可能发生的问题,似乎打破这是使用自动最小化的CSS。 缩小束的请求path可以有不同于原始CSS的path。 这可能会自动发生,所以会造成混淆。

缩小捆绑包的映射请求path应该是“/ originalcssfolder / minifiedbundlename”而不仅仅是“minifiedbundlename”。

换句话说,命名你的bundle与原始文件夹结构具有相同的path(用/),这样任何外部资源(如字体,图像)都会被浏览器映射到正确的URI。 另一种方法是使用绝对url(在你的css中引用,但通常不需要。

尝试使用:

 body { background-attachment: fixed; background-image: url(./Images/bg4.jpg); } 

正在保存您想要发布的图片的图片。