当您将自定义属性与背景图像一起使用时-Safari以另一种方式解释图像的url,例如:

javascript - Chrome显示所有通过URL与自定义属性关联的媒体,但Safari不会加载它们-LMLPHP
Chrome显示所有图像,但Safari日志“不允许加载本地资源

另一个例子:
javascript - Chrome显示所有通过URL与自定义属性关联的媒体,但Safari不会加载它们-LMLPHP
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);
}


它对我俩都起作用-参见屏幕截图

javascript - Chrome显示所有通过URL与自定义属性关联的媒体,但Safari不会加载它们-LMLPHP

10-05 20:29
查看更多