Css --webkit-image-set()语法不适用于Chrome

Question

我想在我的网站上为图片使用.avif和.webp，记住我需要为不支持的浏览器提供后备。Docs https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()#using_image-set_to_provide_alternative_formats建议-webkit-image-set应该提供帮助：

background-image: url("/public/header-fallback.jpg");
background-image: -webkit-image-set(url('/public/header.avif') type('image/avif'), url('/public/header.webp') type('image/webp'), url('/public/header.jpg') type('image/jpeg'));

这在火狐中是有效的(跳过了avif，使用了webp )，但是Chrome给我的是Invalid property value (整个样式被忽略，使用的是‘header-faulback.jpg’)。为什么？

Answer 1

似乎chrome并不完全支持image-set

我们的实现不符合规范，因为只接受图像的URL值，并且只接受以'x‘为单位的分辨率。

source

要使它与chrome一起工作，请尝试移除该类型并添加1x

url('https://url.avif') 1x