多个背景！
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
对于没有进行渐变的任何浏览器，这两行都是后备。请参阅以下有关仅堆叠IE <9的图像的注意事项。
最后一行为可以处理这些背景的浏览器设置了背景图片和渐变。
几乎所有当前的浏览器都支持多个背景图像和CSS背景。有关浏览器支持，请参见http://caniuse.com/#feat=css- gradients。有关为什么不需要多个浏览器前缀的文章，请参见http://codepen.io/thebabydino/full/pjxVWp/
应当注意，第一个定义的图像将在堆栈中位于最顶层。在这种情况下，图像位于渐变的TOP上。
有关背景分层的更多信息，。
IE9及更高版本可以以相同方式堆叠图像。您可以使用它为ie9创建一个渐变图像，尽管我个人不会。但是要注意的是，仅使用图像时，即<9将忽略后备语句，并且不显示任何图像。当包含渐变时，不会发生这种情况。在这种情况下，要使用单个后备图像，建议您将PaulIrish的出色的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);
}
背景位置，背景重复等也是如此。
602392714
清零编程群