在浏览器不支持某种文件类型的情况下，是否有办法在CSS中创建一个后备图像?

Question

我最近了解到我可以在HTML中创建回退图像，如下所示:

<picture>
<source srcset="img/nat-1-large.webp" />
<img
src="img/nat-1-large.jpg"
alt="Photo 1"
class="composition__photo composition__photo--p1"
/>
</picture>

我的理解是，如果你的用户的网络浏览器可能不支持webp文件格式，那么上面的内容特别有用。我想知道是否有一种方法可以在css中做到这一点。我有以下CSS代码:

&--3 {
background-image: url(../img/nat-5.webp);
}

当前是否有一种方法可以显示jpg文件，如果浏览器不支持webp图像?

谢谢!

Answer 1

你只需要用逗号分隔背景图片。

background: URL(img/background.jpg), URL(img/backgroud.webp)

我在IE11中测试了这个功能，caniuse.com说它不支持webp，但它工作了。