使样式表中的 URL 相对于当前位置而不是样式表的位置

Question

我一直在每个页面的顶部使用 CSS 构建我的页面，但由于我使用的许多样式在整个网站中重复出现，我认为创建它会更容易（而且更整洁）全局样式表。

虽然过渡相当顺利，但我遇到了一个问题，即样式表中的 URL 是相对于样式表的位置而不是活动页面的位置。

我目前的文件结构结构看起来有点像这样

/products/productN/

在每个文件夹中都有一些与每个产品相关的图像，这些图像用作背景图像。我以前只是在使用

background-img: url ("header.jpg");

但现在拥有一个全局样式表会导致网站查找如下图像

/folderinwhichstylesheetissaved/header.jpg

由于网站的文件结构，使用 .或 ./ 不是一个选项，所以我想知道是否有办法将样式表定向到当前位置（不创建动态样式表），或者将有效样式移回产品模板页面是否更简单?

Answer 1

<base> 标记在技术上是可行的，因为它会覆盖页面的基本 URL。但是，不推荐使用它，因为它会覆盖所有内容，而不仅仅是 CSS。如果您选择这样做，您必须记住该页面上的所有相对路径都将从提供的 URL 开始，并且对于较大的项目，维护起来将是一场噩梦。