愿所有的美好和期待都能如约而至

未加载图像的Safari上的css背景图像相对路径变量

发布时间:  来源:互联网  作者:匿名  标签:css css-variables error CSS background-image relative path var() on Safari not l  热度:37.5℃

本文介绍了未加载图像的Safari上的css背景图像相对路径变量()的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

不确定是否有人遇到过这个问题(我见过类似的,但不完全是),但在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

推荐答案

这似乎是一个Safari错误-在iOS Safari(14.4)中也可以看到。

我能找到的唯一解决办法是使用Backage-Image语句

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

在主代码文件的样式元素中(将PNG放置在相应的正确相对位置)-仍然可以在CSS文件中设置var。

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

这篇关于未加载图像的Safari上的css背景图像相对路径变量()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP