当您将自定义属性与背景图像一起使用时-Safari以另一种方式解释图像的url,例如:
Chrome显示所有图像,但Safari日志“不允许加载本地资源
另一个例子:
Chrome不会显示所有图像,但Safari可以正常运行
问题是方向,我不知道为什么,但是当您使用自定义属性并为背景图像设置url时-Safari会在文件路径中增加一个步骤,而其他单词会添加“”。
我试图解决此问题,只是为Safari创建了一个仅具有自定义属性的文档,当JS检测到Safari时,它会切换具有自定义属性的css文档,但它也不能很好地工作,因为野生动物园开始显示图像-dat很酷,但是当我打开暗模式时,它不会刷新新的新图像(这就是我全部启动的原因)
另外,您可以在这里找到一个很好的例子:https://github.com/rudensergey/testChromeSafari
我的项目中遇到了这个问题:https://github.com/rudensergey/darkroom
我希望接下来:
我有带有图像的伪对象(我将它们设置为带有URL的背景图像),而不是背景图像的URL,例如,我使用自定义prop var(-pucture)
之后,当我想将网站切换为深色主题时,JS会重写自定义prop()并将新图像应用于网页,但是...
最佳答案
我将您的:root
更改为此:
:root {
/* Images are in the same directory */
/* this path works in Chrome */
--path-to-image-one: url(../media/1.png);
/* this path works in Safari */
--path-to-image-two: url(../media/2.jpg);
}
它对我俩都起作用-参见屏幕截图