我使用avif格式重新设计了我的应用程序以适配手机设备(即使并非所有设备都支持它)。
这段代码可以很好地工作,如果浏览器支持,将优先使用avif格式:
<picture>
<source srcset="image.avif" media="(max-width:500px)" type="image/avif" />
<img src="image.jpg" alt="nice dog" />
</picture>
但我也得到了一些作为background-image
CSS属性的图像。我尝试使用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也无法很好地解释这段代码。有什么想法吗?我是不是在尝试一些浏览器仍处于草案阶段的东西?