Safari 上的 CSS 背景图像相对路径 var() 未加载图像

编程问答 2022-05-17

问题描述

不确定是否有人遇到过这个问题（我见过类似但不完全相同）但在 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 上加载没有任何问题，有什么想法吗？

enter image description here

检查：

  • Mac 操作系统 11.2.1
  • Safari 14.0.3

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

编辑：

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

解决方法

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

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

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

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

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

css-variablesrelative-pathsafari