Safari上的CSS背景图像相对路径var（）未加载图像答案

【问题标题】：CSS background-image relative path var() on Safari not loading imageSafari上的CSS背景图像相对路径var（）未加载图像
【发布时间】：2021-06-19 11:12:59
【问题描述】：

不确定是否有人遇到过这个问题（我见过类似但不完全），但在 Mac OSX Safari 浏览器上，当您将变量用于背景图像的相对图像位置时，会出现以下问题，但不会加载

:root {
  --lb3-widget-icon: url(../../images/logo-icon2.png);
}
.image-area {
  background-image: var(--lb3-widget-icon);
}

以下是存在该问题的项目示例： https://codepen.io/alexbernotas/pen/dypLKvR

如您所见，左上角蓝色区域上方的图像未加载，但在 Firefox 和 Chrome 上加载时没有任何问题，有什么想法吗？

检查：

Mac OS 11.2.1
Safari 14.0.3

我知道如果您使用完整的图像路径 URI，那么它会起作用，但我需要让它与相对文件路径一起使用

编辑：

一个更简单的例子： https://codepen.io/alexbernotas/pen/abpbVeG

【问题讨论】：

png 肯定不会加载吗？您能否提出一个简单的 sn-p 来显示问题，因为当我在背景图像 var 中尝试 ../../file.jpg 时，它在 Safari 14.4 (IOS) 下工作，但我在您提供的链接网站。
@AHaworth 确定我添加了一个更简单的示例来复制问题，请查看上方编辑下的链接
谢谢，我现在可以在 Safari (IOS) 下看到问题了。
这看起来像一个 Safari 错误。如果我们使用背景图片： url(../../images/logo-icon2a.png);它可以正常拾取图像，即设法找到正确的文件夹，但如果它是变量则不会。您是否看到任何错误？不知道该建议什么。
嗨@AHaworth 不，我在控制台中根本看不到任何错误，是的，我注意到如果你直接输入路径它很高兴，但作为一个变量它会失败：/

标签： css safari relative-path css-variables

【解决方案1】：

这似乎是一个 Safari 错误 - 也出现在 IOS Safari (14.4) 中。

我能找到的唯一解决方法是使用 background-image 语句

background-image: var(--lb3-widget-icon);

在主代码文件的样式元素中（将 png 定位在正确的相对位置） - 仍然可以在 css 文件中设置 var。

这显然不理想，但确实意味着您仍然可以使用具有相对文件夹路径的 CSS 变量来选择图像，尽管意味着图像文件夹必须移动。

【讨论】：

这是正确的，如果您将 CSS 文件移到图像目录的位置或将图像移动到托管 CSS 文件的完全相同的目录，我们得出了相同的结论，那么这个问题将得到解决，因为当涉及 CSS 变量时，Safari 对“../../”上升一级或几级不满意。除了为我们公开可用的小部件保持相同的结构外，我们决定使用 SCSS 变量代替图像路径，因为这允许我们保留文件夹结构，因为它是最小的更改工作

【解决方案2】：

我刚刚遇到了同样的错误。谢谢你写出来！

为了它的价值，我在我的 .htaccess 文件中添加了一个重定向规则作为一种愚蠢但有效的解决方法：

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*/(images/bg_.+\.png) real/path/$1 [L,QSA]

这会将带有无效前缀的images/bg_XXX.png 的所有请求重定向到real/path/images/bg_XXX.png 的正确路径。

【讨论】：