javascript - 在 CSS 中控制相对 URL

Question

我的产品页面是这样排列的:

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

等等

每个目录都有自己的“index.html”、“first_image_small.jpg”、“first_image_large.jpg”、“second_image……你懂的。

我正在使用 CSS“background-image”和媒体查询，以便在“onLoad”以及有人翻转纵向/横向或调整浏览器大小时，这些图像会根据屏幕尺寸切换。 (顺便说一句，如果您知道如何在 JavaScript 中执行此操作，请查看 this question，因为目前唯一的答案是“onLoad”-only)。

反正根据this question ，如果我尝试将每个“index.html”链接到单个样式表，它将查找与样式表目录相关的图像而不是每个“index.html”(是的，我明白为什么需要那样) .

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

Answer 1

似乎不可能让 css 中的相对 url 使用 css 文件路径之外的另一个基本路径。 specification状态:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

但是，如果您不想使用任何服务器端脚本或 javascript，您可以在服务器上对 css 文件进行符号链接(symbolic link)。这将允许您只在一个地方编辑文件:

假设您的目录结构和 css 位于:home_directory/style.css。在 unix 命令行上执行以下操作:

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

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

如果您使用的是 apache 网络服务器，则可能需要允许符号链接(symbolic link)。为此，将以下行添加到配置或 .htaccess

Options +FollowSymLinks

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