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

our implementation has not been per the spec, as only URL values were accepted for the image, and only resolutions with 'x' as a unit were accepted.

source

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

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

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

Css --webkit-image-set() syntax doesn't work for Chrome

css

responsive-images