时间戳

首页 > 解决方案 > 如何使用 CSS 加载基于浏览器支持的图像格式？

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

问题描述

我想在我的 CSS属性中使用WebP图像格式。background-image但是，由于 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，但是如何根据浏览器支持加载图像？

我试图寻找解决方案，但找不到。让我知道这是否是重复的并且解决方案已经存在。

谢谢。

标签： htmlcsscross-browserbackground-imagewebp

解决方案

使用 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

推荐阅读