如何有一个后备背景图像使用图像集没有javascript?

Question

我对前端和css相当陌生。我试图以这样一种方式添加background-image，如果支持.avif文件，则加载这些文件。否则回退到.png文件。我想知道是否有可能在没有javascript的情况下做到这一点，并且不加载所有图像以不影响页面速度。我在(大多数)模拟器中运行Chrome 107.0.5304.110,ios 16.1(我知道旧版本的ios不支持avif，但最新的一个。想要的东西与两者都工作)，和火狐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是灰色的。

有办法解决这个问题吗?谢谢!

Answer 1

background-image: url("/static/img/image.avif"),url("/static/img/image.avif") 1x,url("/static/img/image.png") 1x;

Answer 2

似乎image-set部分支持Safari浏览器，

来源caniuse

你可以直接使用

background-image: 
url("/static/img/image.avif"),
url("/static/img/image.jpeg");

你可以在下面的沙箱上测试，在Firefox上使用的是avif，在safari上使用的是jpg。

codesandbox

作为MDN使用示例，image-set()没有内置的回退，因此在。

.box {
background-image: url("large-balloons.jpg");
background-image: image-set(
"large-balloons.avif" type("image/avif"),
"large-balloons.jpg" type("image/jpeg")
);
}

正如你在上面的例子中看到的那样，它使用了type param，这是safari不支持的。

你可以使用的另一个解决方案是为safari设置@media选择器，并在那里放置该浏览器的特定代码:safari浏览器的媒体查询