如何解决优先使用背景图像 css 属性的 avif 格式
我使用适用于手机设备的 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 here。 即使 Firefox 或 chrome 也不能很好地解释这段代码。任何想法 ?我是否正在尝试一些仍处于浏览器草案中的内容?
解决方法
你有正确的线索。 image-set 属性尚不支持类型声明。这是当前您也链接的 CSS4 草稿版本的一部分:https://drafts.csswg.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 支持发布的版本相同。但是我不会依赖于生产应用。
希望这对您有所帮助。 :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。