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

Question

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

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

MDN通过将渐变设置为后备图片，同时背景图片仍在加载或无法加载。他建议使用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');
}

Answer 1

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

最后一个示例应该用于后台回退。从内存中，默认情况下将使用最后一个背景图像定义，如果无法解析该值，则将使用先前的定义等。

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