Html 在CSS文件中使用相对URL，它相对于什么位置？

当在CSS文件中定义背景图像URL之类的内容时，当使用相对URL时，它相对于什么位置？例如：

假设文件

/stylesheets/base styles.css

包含：

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

如果我通过

将此样式表包含到不同的文档中，CSS文件中的相对URL是否会相对于

/stylesheets/

中的样式表文档，或者相对于包含它的当前文档？可能的路径如下：

/item/details.html
/关于/index.html
/关于/extra/other.html
/index.html

它是相对于CSS文件的。

（其他任何东西都会被打破，IMNSHO）

根据：

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

因此，在回答您的问题时，它将与

/stylesheets/

相关

如果您考虑一下，这是有意义的，因为CSS文件可以添加到不同目录中的页面，因此将其标准化为CSS文件意味着URL将在链接样式表的任何地方工作

为了创建不依赖于资源绝对位置的模块化样式表，作者可以使用相对URI。使用基本URI将相对URI（如中所定义）解析为完整URI。RFC 3986第5节定义了该过程的标准算法。对于CSS样式表，基本URI是样式表的URI，而不是源文档的URI

例如，假设以下规则：

body{background:url（“黄色”）}

位于URI指定的样式表中：

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

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

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

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

---

取自。

它是相对于样式表的，但我建议将URL设置为相对于您的URL：

div#header{
背景图像：url（/images/header background.jpg）；
}

---

通过这种方式，您可以在不需要重构的情况下移动文件。

一个可能出现的问题似乎打破了这一点，那就是使用css的自动最小化。缩小包的请求路径可以具有与原始css不同的路径。这可能会自动发生，因此可能会造成混乱

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

换句话说，将包命名为具有与原始文件夹结构相同的路径（带/），这样任何外部资源（如字体、图像）都将通过浏览器映射到正确的URI。另一种方法是在css中使用绝对url（参考），但这通常不可取。

尝试使用：

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

---

Images

是一个文件夹，其中包含您要发布的图片。

这对我很有效。添加两个点和斜线

body{
    background: url(../images/yourimage.png);
}

---

前面额外的“/”有什么区别？就像命令行上的路径名一样，路径前面的前导/意味着它指向当前web服务器上的绝对资源。实际上，在某种情况下，相对于CSS文件使用URI更好。在我的情况下，我有一个目录“/CSS/”我把所有CSS数据放在那里。现在，我想在一个单独的文件夹中测试网站上的新功能。这变得很难测试，例如，测试文件夹中的新背景图像。这完全取决于您的需要…绝对路径使解决方案很难放在域的子文件夹中。您希望支持子文件夹的原因有很多。我t使测试更容易（正如迭戈提到的）您可以将以前的版本/预发行版与prod放在同一个域中。将来的更改是将公司代理服务器设置为支持SSO，将所有解决方案移动到一个域中，等等。特别是使用SSL，您可能希望避免维护多个域名的开销。对我来说，这些注意事项比n“更容易移动我的.css文件”。图像和类似的东西无论如何都会转到cdn，因此这是完美的。看起来IE中的规则有一个例外：

-ms behavior

：（还有一个例外：当url是自定义属性的默认值时。假设您定义

.banner{background image:var（--bgimgURL（'images/default.jpg'））; }

，但不要为

--bgimg

定义一个值。然后在

/index.html

页面上，一个

.banner

将查找

/images/default.jpg

，但在另一个页面上

/about/index.html

将查找

/about/images/default.jpg

。非常糟糕。更正：默认值上面的错误在Chrome v60中已经修复。如果你的css在一个捆绑包中，路径真的不重要。它不是你认为它会在哪里，没有什么是相对的。我在使用属性时遇到了问题：

background:var（--原色背景）没有重复的中心url（“maps.jpg”）；

这在IOS和Safari中不起作用。只有绝对路径

/resources/maps.jpg

与css属性一起在Safari中起作用。这为我节省了大量时间！谢谢。应该有更多的文档说明，它只适用于从根目录向下一个目录的页面。对于根目录或向下两个目录的任何页面，它都可以我会失败的。