多种背景！

body {

  background: #eb01a5;

  background-image: url("IMAGE_URL"); /* fallback */

  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */

}

这两行是任何不做渐变的浏览器的后备。请参阅下面的仅 IE < 9 堆叠图像的注释。

• 第 1 行设置平坦的背景颜色。
• 第 2 行设置背景图像后备。

最后一行为可以处理它们的浏览器设置背景图像和渐变。

• 第 3 行适用于所有相对现代的浏览器。

几乎所有当前的浏览器都支持多个背景图像和 css 背景。有关浏览器支持，请参阅http://caniuse.com/#feat=css-gradients
。有关为什么不需要多个浏览器前缀的好帖子，请参阅http://codepen.io/thebabydino/full/pjxVWp/

层堆栈

应该注意的是，第一个定义的图像将位于堆栈的最顶部。在这种情况下，图像位于渐变的顶部。

有关背景分层的更多信息，请参见http://www.w3.org/TR/css3-background/#layering。

仅堆叠图像（声明中没有渐变）对于 IE < 9

IE9 及更高版本可以以同样的方式堆叠图像。您可以使用它为 ie9 创建渐变图像，但我个人不会。但是需要注意的是，仅使用图像时，即 < 9
将忽略回退语句并且不显示任何图像。包含渐变时不会发生这种情况。要在这种情况下使用单个后备图像，我建议使用 Paul Irish
的精彩Conditional HTML 元素以及您的后备代码：

.lte9 #target{ background-image: url("IMAGE_URL"); }

背景位置、大小等。

适用于单个图像的其他属性也可以用逗号分隔。如果仅提供 1 个值，则该值将应用于包括渐变在内的所有堆叠图像。background-size: 40px;将图像和渐变限制为 40px 的高度和宽度。但是使用background-size: 40px, cover;会使图像变为
40px，渐变将覆盖元素。要仅将设置应用于一个图像，请为另一个设置默认值：background-position: 50%, 0 0;或支持它的浏览器使用initial：background-position: 50%, initial;

您也可以使用背景速记，但这会删除备用颜色和图像。

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

这同样适用于背景位置、背景重复等。