CSS背景图片回退方案

Question

有没有一种方式可以使用CSS为背景图像指定备用图像？

示例：

.container {
  background-image: url(pics/img.webp);
  background-image-fallback: url(pics/img.png);
}

- Karl Barnholdt

---

这回答解决了你的问题吗？如果默认背景图片不存在，则使用备选背景图片 - Nijeesh Joshy

@NijeeshJoshy 不是真的 - Mo.

简单地陈述你的问题并未解释为什么它不是重复的，这样做将无法成功地使你的问题重新打开。 - pppery

Answer 1

如果第一张图片不存在，你可以使用多张图片，第二张将会被显示。

.container {
      background-image: url(pics/img.webp), url(pics/img.png);
    }

- Vikas Jadhav

---

从技术上讲，这不是一个回退，因为浏览器会尝试加载所有的图片。 - Temani Afif

我同意你的看法，Temani afif。 - Vikas Jadhav

是的，它会影响页面速度，因为浏览器尝试加载两个图像。指定备用方案的想法是为无法加载的图像提供替代方案，而不是同时加载两个图像。我目前正在使用这种语法，但谷歌PageSpeed测试工具（Lighthouse）建议提供任何备用方案。我应该考虑编写不同的标记，还是有一种只使用CSS就可以指定备用方案的方法？感谢您的回复。 - Karl Barnholdt

Answer 2

尝试像这样。

.container {
  background: url((pics/img.webp) bottom center no-repeat,url((pics/img.webp) repeat;
}

- Nethra