背景图像后备：我应该使用 CSV 还是多个规则？答案

【问题标题】：background image fallback: should I use CSV or multiple rules?背景图像后备：我应该使用 CSV 还是多个规则？
【发布时间】：2016-10-24 13:40:52
【问题描述】：

大多数现代浏览器，甚至 IE9，都支持background-image 的逗号分隔值 (CSV)。根据MDN，绘制顺序是从右到左——定义的第一个图像将堆叠在顶部，任何后续图像都将堆叠在下方（如果第一张图像不透明，则会隐藏）。

.masthead {
  background-image: url('top.jpg'), url('bottom.jpg');
}

Harry Roberts uses an insightful technique 通过在背景图像仍在加载或加载失败时将渐变设置为后备。他建议使用 CSV 功能。

.masthead {
  background-image: url('top.jpg'),
    linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);
}

这种方法是否比简单地定义background-image 属性两次更高效？与以下技术相比，该技术有哪些优点或缺点？

.masthead {
  background-image: linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);
  background-image: url('top.jpg');
}

【问题讨论】：

【解决方案1】：

前两个示例使用CSS3 multiple backgrounds。出于各种原因（例如性能和浏览器支持），您不应将此作为后台回退技术。

最后一个示例应该用于后台回退。从内存中，默认使用最后一个 background-image 定义，如果无法解析值，则使用之前的定义，等等。

另请参阅background generator by ColorZilla，它会自动生成所需的回退。

【讨论】：