我的产品页面是这样排列的:
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”(是的,我明白为什么需要那样) .
显而易见的解决方案是在每个产品目录中复制样式表,但这对维护来说有点麻烦。还有更优雅的解决方案吗?
最佳答案
似乎不可能让 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 .
关于javascript - 在 CSS 中控制相对 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25514607/