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

Question

我想在我的网站上使用.avif和.webp来显示图像，请记住我需要为不受支持的浏览器提供后备。文档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'));

这在 Firefox 中有效（avif 被跳过并使用 webp），但 Chrome 给了我Invalid property value（整个样式被忽略并使用“header-fallback.jpg”）。为什么？

Answer 1

chrome 好像不完全支持 image-set

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

来源

要使其与 chrome 一起使用，请尝试删除该类型并添加 1x

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