Multiple backgrounds!
(多个背景！)
body { background: #eb01a5; background-image: url("IMAGE_URL"); /* fallback */ background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */ }
These 2 lines are the fallback for any browser that doesn't do gradients.
(对于没有进行渐变的任何浏览器，这两行都是后备。)
See notes for stacking images only IE < 9 below. (请参阅以下有关仅堆叠IE <9的图像的注意事项。)
- Line 1 sets a flat background color.
(第1行设置了平坦的背景色。)
- Line 2 sets the background image fallback.
(第2行设置了背景图片后备广告。)
The final line sets a background image and gradient for browsers that can handle them.
(最后一行为可以处理这些背景的浏览器设置了背景图片和渐变。)
- Line 3 is for all relatively modern browsers.
(第3行适用于所有相对较新的浏览器。)
Nearly all current browsers have support for multiple background images and css backgrounds.
(几乎所有当前的浏览器都支持多个背景图像和CSS背景。)
See http://caniuse.com/#feat=css-gradients for browser support. (有关浏览器支持，请参见http://caniuse.com/#feat=css-gradients 。)
For a good post on why you don't need multiple browser prefixes, see http://codepen.io/thebabydino/full/pjxVWp/ (有关为什么不需要多个浏览器前缀的文章，请参见http://codepen.io/thebabydino/full/pjxVWp/)
Layer Stack
(层堆叠)
It should be noted that the first defined image will be topmost in the stack.
(应当注意，第一个定义的图像将在堆栈中位于最顶层。)
In this case, the image is on TOP of the gradient. (在这种情况下，图像位于渐变的TOP上。)
For more information about background layering see http://www.w3.org/TR/css3-background/#layering .
(有关背景分层的更多信息，请参见http://www.w3.org/TR/css3-background/#layering 。)
Stacking images ONLY (no gradients in the declaration) For IE < 9
(仅堆叠图像（声明中没有渐变）对于IE <9)
IE9 and up can stack images this same way.
(IE9及更高版本可以以相同方式堆叠图像。)
You could use this to create a gradient image for ie9, though personally, I wouldn't. (您可以使用它为ie9创建一个渐变图像，尽管我个人不会。)
However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. (但是要注意的是，仅使用图像时，即<9将忽略后备语句，并且不显示任何图像。)
This does not happen when a gradient is included. (当包含渐变时，不会发生这种情况。)
To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code: (在这种情况下，要使用单个后备图像，建议您将Paul Irish的出色的Conditional HTML元素与后备代码一起使用：)
.lte9 #target{ background-image: url("IMAGE_URL"); }
Background position, sizing etc.
(背景位置，大小等)
Other properties that would apply to a single image may also be comma separated.
(适用于单个图像的其他属性也可以用逗号分隔。)
If only 1 value is supplied, that will be applied to all stacked images including the gradient. (如果仅提供1个值，它将应用于包括梯度在内的所有堆叠图像。) background-size: 40px; will constrain both the image and the gradient to 40px height and width.
(会将图片和渐变都限制为40px的高度和宽度。)
However using background-size: 40px, cover; (但是使用background-size: 40px, cover;)
will make the image 40px and the gradient will cover the element. (将使图像40px，渐变将覆盖元素。)
To only apply a setting to one image, set the default for the other: background-position: 50%, 0 0; (要仅将设置应用于一幅图像，请为另一幅图像设置默认值： background-position: 50%, 0 0;)
or for browsers that support it use initial : background-position: 50%, initial; (或支持它的浏览器使用initial ： background-position: 50%, initial;)
You may also use the background shorthand, however this removes the fallback color and image.
(您也可以使用背景速记，但这会删除后备颜色和图像。)
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
The same applies to background-position, background-repeat, etc.
(背景位置，背景重复等也是如此。)
