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

Question

我想在我的 CSS background-image 属性中使用 WebP 图像格式。但是，由于 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 属性设置背景图像？我知道我可以使用@media 查询根据屏幕大小选择图像，但是如何根据浏览器支持加载图像？

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

谢谢。

Answer 1

使用 2 个背景图片： 一种是JPG或PNG，另一种是WEBP，浏览器会自动选择最佳的。

在 codepen 上找到此代码：Robin Rendle

CSS：

element {
  width: 50vw;
  height: 100vh;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/cust-housegreening-pup%402x-4cf7ada520811031a97bee12c06d9e9367f811bd86255ea60d40aa809cf58801.jpg');
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/cust-housegreening-pup@2x-4cf7ada520811031a97bee12c06d9e9367f811bd86255ea60d40aa809cf58801.webp');
}

https://codepen.io/robinrendle/pen/ORmzJY

Answer 2

改用 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 参数仅用于示例目的。