多个背景的堆叠顺序

多个背景图像是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 { } 
}

翻译自: https://css-tricks.com/stacking-order-of-multiple-backgrounds/