html - 如何使用 CSS 加载基于浏览器支持的图像格式？

Question

我想使用 WebP我的 CSS 中的图像格式 background-image属性(property)。但是，由于 WebP 是相当新的并且仍然不受所有新旧浏览器的支持，我还想添加对该图像的 JPEG 版本的支持作为后备。

我知道我可以使用 <picture>标记来执行此操作:

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg">
</picture>

这将使浏览器加载第一个支持的格式。但是我可以仅使用 CSS 以某种方式实现相同的效果吗，因为我正在使用 background-image 设置背景图像。属性(property)？我知道我可以使用 @media 根据屏幕尺寸选择图像查询，但如何根据浏览器支持加载图像？

我试图寻找解决方案，但找不到。如果这是重复的并且解决方案已经存在，请告诉我。

谢谢。

Answer 1

改用 CSS @supports。

.yourclass {
    background: url("image.jpg") no-repeat center / contain;
}

@supports (background-image: url("image.webp")) {
    .yourclass {
        background: url("image.webp") no-repeat center / contain;
    }
}

别担心。打开检查器，您会注意到浏览器不会加载这两个图像。

需要考虑的事项:

• 请注意，您必须在jpg 之后 声明webp 版本，或者级联流应该获胜。
• background-repeat、background-position 和 background-size 参数仅用于示例目的。