css - 背景图像回退 : should I use CSV or multiple rules?

Question

大多数现代浏览器，甚至 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');
}

Answer 1

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

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

另见 background generator by ColorZilla它会自动生成所需的回退。