多个背景的堆叠顺序

多个背景图片是 CSS3 的一个很酷的功能。 语法很简单，只需用逗号分隔它们即可。 我发现使用background 简写属性最简单/最好，这样你就可以声明位置、重复等，并将它们全部组合在一起。 在查看语法时，并不明显的是，当这些图片重叠时，在垂直堆叠顺序中哪个图片位于顶部。 规范在这方面很明确，并且浏览器实现遵循该规范。 第一个位于顶部，然后依次向下。

background: 
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */

它类似于z-index，但这不是z-index，它是一个单一元素的一部分。

我认为这有点令人困惑，因为它与 HTML 的自然工作方式相反。 如果所有元素都具有相同的 z-index（并且以某种方式定位并重叠），则**最后一个**元素将位于顶部，而不是第一个。 不过，这也不是什么大问题，只需要学习一次即可。

需要记住的重要一点是，如果要将其中一个背景用于完全不透明/完全重复的图片，请将其列在最后而不是第一个，否则它将覆盖所有其他图片。

还要记住，虽然多个背景非常棒，但不支持它的浏览器的回退是根本不显示背景，所以要小心。 处理它的最佳方法，一如既往，是 Modernizr。 他们甚至在他们网站的首页上使用它作为演示（为了清晰起见进行了调整）

.multiplebgs body {
  /* Use awesome multiple backgrounds here */
}
.no-multiplebgs body {
  /* laaaaaame fallback */
}

如今（2019 年 5 月更新），我可能根本不会担心这个问题，因为该功能在浏览器中的支持率非常高。 此外，你也可以像这样在 CSS 中实现它：

@supports (background-image: url(foo.jpg), url(bar.jpg)) {
  body { } 
}