css3多个背景图像的后备？答案

【问题标题】：Fallback for css3 multiple background-images?css3多个背景图像的后备？
【发布时间】：2013-02-02 23:54:41
【问题描述】：

我有 2 张图片作为我身体的背景：

background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;

我发现为了在bg.png 图像上方显示upper_bg.png，我需要将它放在列表的首位。但是对于不支持多种背景的浏览器，我只想显示bg.png，我担心浏览器会使用upper_bg.png 作为备用而不是bg.png。我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

在多个背景应该这样做之前，只需添加一个带有 bg.png 的 background 声明：

background: url(../img/bg.png) repeat;
background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;

较旧的浏览器会忽略第二行而保留第一行；他们根本不应该尝试使用第二行的任何部分。支持多种背景的浏览器将使用第二行而不是第一行，并照常覆盖它。

【讨论】：

这可以用于图像不可用的后备图像吗？（例如，带有后备轮廓的个人资料图像，尽管在常规处理期间使用 404 可能不是规范）
如果我们有不同的图片作为备用图片，是否会有额外的要求？
@rookie1024：不幸的是，没有。 IIRC 有一个不同的建议，用于在无法访问图像的情况下提供后备 - 这将需要不依赖于级联的不同语法，因为级联完全是一个不同的概念。
@nickspiel：浏览器只请求它最终使用的图像。所以在我的回答中，如果浏览器支持多张图片，它不会再次请求 bg.png。
多背景图片支持出奇的好，连IE9都支持！ caniuse.com/#search=multiple%20background