使用图像集实现后备背景图像而不依赖 javascript
我对前端和 CSS 相当陌生。我正在尝试添加 background-image，如果支持 .avif 文件，则加载这些文件。否则回退到 .png 文件。我想知道是否可以在没有 javascript 的情况下执行此操作，并且无需加载所有图像而不影响页面速度。我在（大部分）模拟器中运行 Chrome 107.0.5304.110、ios 16.1 （我知道旧版本的 ios 不支持 avif，但最新版本支持。希望能同时使用两者）和 Firefox 106.0.1。
尝试 1 遵循先前的答案。注意 webkit-image-set 的用法。这是我的代码：
background-image: url("/static/img/image.png");
background-image: -webkit-image-set(url("/static/img/image.avif")1x );
此操作适用于 Chrome 和 Firefox，但 ios 上的 Safari 显示灰色图像。
尝试 2 遵循此博客上的答案。注意这里使用的是image-set。代码：
background-image: url("/static/img/image.png");
background-image: image-set(
url("/static/img/image.avif") 1x,
url("/static/img/image.png") 1x,
);
这在所有三个浏览器上都可见，但始终显示 png。我还反转了图像集中的位置，但结果相同。始终为 png。
尝试 3，与尝试 2 略有不同。我只是更改了第一行的格式。
background-image: url("/static/img/image.avif");
background-image: image-set(
url("/static/img/image.avif") 1x,
url("/static/img/image.png") 1x,
);
这在 chrome/firefox 上运行良好，但 ios 是灰色的。
有办法解决这个问题吗？谢谢！
