不确定是否有人遇到这个问题(我见过类似的问题,但不完全一样),但在 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 https://codepen.io/alexbernotas/pen/dypLKvR
正如您所看到的,左上角蓝色区域上方的图像未加载,但在 Firefox 和 Chrome 上加载时没有任何问题,有什么想法吗?
检查于:
- 苹果操作系统 11.2.1
- Safari 14.0.3
我知道如果您使用完整的图像路径 URI 那么它会工作,但我需要让它与相对文件路径一起工作
EDIT:
一个更简单的例子:https://codepen.io/alexbernotas/pen/abpbVeG https://codepen.io/alexbernotas/pen/abpbVeG
这似乎是 Safari 的一个错误 - 在 IOS Safari (14.4) 中也可以看到。
我能找到的唯一解决方法是使用背景图像声明
background-image: var(--lb3-widget-icon);
在主代码文件的样式元素中(将 png 定位在正确的相对位置)- var 仍然可以在 css 文件中设置。
这显然并不理想,但确实意味着您仍然可以使用具有相对文件夹路径的 CSS 变量来选择图像,尽管这意味着图像文件夹必须移动。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)