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>

这将使浏览器加载第一个受支持的格式。但是，由于我使用background-image属性设置了背景图片，因此仅使用CSS就能达到相同的效果吗？我知道我可以使用@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;
    }
}

不用担心。打开检查器，您会发现浏览器不会同时加载两个图像。

注意事项：

请注意，您必须在webp之后声明jpg版本，否则级联流应该赢。
background-repeat，background-position和background-size参数只是出于示例目的。

Answer 2

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

罗宾·雷德尔（Robin Rendle）在codepen上找到了这段代码

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

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

2 个答案: