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

HTML CSS

乐蛋蛋

2020-03-18

在CSS文件中定义诸如背景图片URL之类的内容时,使用相对URL时,它相对于何处?例如:

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

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

如果我包括通过这个样式表到不同的文件<link ... />会在CSS文件中的相对URL是相对于样式表文件/stylesheets/相对于当前文档包括它是什么?可能的路径如下:

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

第2052篇《在CSS文件中使用相对URL,它相对于哪个位置?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
逆天前端宝儿 2020.03.18

尝试使用:

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

Images 是包含要发布图片的文件夹。

番长GO 2020.03.18

这对我有用。加两个点和斜线。

body{
    background: url(../images/yourimage.png);
}
阳光Tony 2020.03.18

使用css的自动最小化时,可能会发生的一个问题,并且似乎打破了这一问题。缩小包的请求路径可以具有与原始CSS不同的路径。这可能会自动发生,因此可能引起混乱。

缩小包的映射请求路径应为“ / originalcssfolder / minifiedbundlename”,而不仅仅是“ minifiedbundlename”。

换句话说,将包命名为与原始文件夹结构具有相同的路径(带有/),这样,所有外部资源(如字体,图像)都将被浏览器映射为正确的URI。另一种方法是在CSS中使用绝对url(refs,但这通常是不希望的。

小小西门 2020.03.18
小卤蛋神乐L 2020.03.18

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

例如,假设以下规则:

body { background: url("yellow") }

位于URI指定的样式表中:

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

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

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

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

取自CSS 2.1规范

阳光Itachi村村 2020.03.18

它是相对于样式表的,但是我建议将URL相对于您的URL:

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

这样,您就可以移动文件,而无需将来对其进行重构。

村村伽罗十三 2020.03.18

它是相对于CSS文件的。

樱Near 2020.03.18

根据W3

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android