时间戳

首页 > 解决方案 > Css --webkit-image-set() 语法不适用于 Chrome

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

问题描述

我想在我的网站上使用.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'）。为什么？

标签： cssresponsive-images

解决方案

似乎 chrome 不完全支持 image-set

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

资源

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

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

推荐阅读