Javascript 控制CSS中的相对URL

我的产品页面安排如下：

home_directory/products/product_one/  
home_directory/products/product_two/  

等

每个目录都有自己的“index.html”、“first\u image\u small.jpg”、“first\u image\u large.jpg”、“second\u image”……你明白了

我正在使用CSS“背景图像”和媒体查询，以便这些图像在屏幕大小为“onLoad”时以及当有人翻转纵向/横向或调整浏览器大小时切换到屏幕大小（顺便说一句，请查看您是否知道如何在JavaScript中实现这一点，因为到目前为止，唯一的答案是“onLoad”-only）

无论如何，根据，如果我尝试将每个“index.html”链接到单个样式表，它将查找相对于样式表目录的图像，而不是每个“index.html”（是的，我理解为什么需要这样做）

---

显而易见的解决方案是在每个产品目录中复制样式表，但这对于维护来说有点混乱。还有更优雅的解决方案吗？

css中的相对url似乎不可能使用css文件路径以外的其他基本路径。状态：

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

但是，如果您不想使用任何服务器端脚本或javascript，可以在服务器上对css文件进行符号链接。这将允许您仅在一个位置编辑该文件：

假设您的目录结构和css位于：

home\u directory/style.css

。在unix命令行上执行以下操作：

cd home_directory
ln -s style.css products/product_one/
ln -s style.css products/product_one/

您将创建指向原始文件的符号链接。浏览器将能够从不同路径访问它们

如果您使用的是apache Web服务器，则可能需要允许符号链接。为此，请在配置中添加以下行或

.htaccess

Options +FollowSymLinks

或者，您可以设置一个服务器重写规则，从任何路径为css文件提供服务，而不需要符号链接。可以找到apache文档。

如果允许使用/，有一个非常简单的解决方案：使用较少的/Sass导入css文件

---

让我们看看如何使用更少的资源来完成。假设您的文件夹结构如下所示：

home_directory/products/product_one/  
home_directory/products/product_two/  

• 主目录
  • css（您的公共css文件位于此处）
  • 产品
    • 产品1
      • css
      • 图像
    • 产品2
      • css
      • 图像

对于您的通用css文件（位于主目录/css中）：

• 所有与产品相关的样式都有相对路径。例如：

  background:url（“../images/pic.jpg”）；

• 将扩展名从.css更改为.less（我不知道这是否必要，但如果将扩展名保留为.css，我会遇到问题）
• 导入.less文件时，请使用

  rel=“stylesheet/less”

对于产品css文件（位于home_目录/products/productX/css中）：

• Less文件将对所有产品具有相同的内容
• 它将只有一行代码（假设您的公共css文件是styles.less）：

…基本上，就是这样。您不需要更改产品样式表的内容，只需更改通用css文件即可

---

注意：您必须使用Less编译器编译样式，它会自动为您生成CSS。或者，如果您不喜欢该编译器，您可以使用Less.js文件（尽管建议仅用于测试，不用于生产）

唯一需要更改文件夹的是图像。因此，所有页面都有一个样式表，每个文件夹有一个图像列表。这感觉像是双重工作，因为你看到了自己强加的模式。对于系统来说，你要指定每一条唯一的信息。使用一个全局CSS作为通用样式，然后使用一个lo为每个指定图像的产品设置cal？对于更优雅的解决方案，我认为这取决于您的服务器端系统（例如php、.net）。