优先考虑具有背景图像 css 属性的 avif 格式

Question

我使用适用于手机设备的 avif 格式重构了我的应用程序（即使并非所有地方都支持）。

此代码完美运行，如果浏览器支持，它会优先考虑 avif 格式：

<picture>
   <source srcset="image.avif" media="(max-width:500px)" type="image/avif" />
   <img src="image.jpg" alt="nice dog" />
</picture>

但我也得到了一些图像作为background-imagecss 属性。我尝试了image-set属性但没有成功。

div {
  background-image: -webkit-image-set(
        url('image.avif') type("image/avif"),
        url('image.jpg') type("image/jpeg"));
  background-image: image-set(
        url('image.avif') type("image/avif"),
        url('image.jpg') type("image/jpeg"));
}

我在这里查看了示例 2 。即使 Firefox 或 Chrome 也不能很好地解释这段代码。任何想法 ？我是否正在尝试一些仍处于浏览器草案中的东西？

Answer 1

你有正确的线索。image-set 属性尚不支持类型声明。这是当前 CSS4 草案版本的一部分，您还链接了该版本：https ://drafts.c​​sswg.org/css-images-4/

目前，我只是使用https://avif.io/将图像转换为 AVIF ，并使用检测脚本将“avif”类添加到我的 HTML 中。那么就很简单了：

.image {background-image:url("image.jpg")}
.webp .image {background-image:url("image.webp")}
.avif .image {background-image:url("image.avif")}

检测脚本有以下几种类型：

• https://dev.to/nucliweb/detect-avif-image-support-to-use-in-your-css-4pen
• https://github.com/djpogo/avif-webp-css-support
• https://avif.io/blog/tutorials/use-avif-in-css/（即将推出）

另一种黑客方法是对内容可见性功能进行媒体查询，因为它与 Chrome 和 Opera 中的 AVIF 支持发布的版本相同。但是我不会在生产应用程序上依赖它。

希望这对您有所帮助。:)