通过使用 CSS3，你可以向元素应用多个背景。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。 仅最后一个背景允许拥有背景色。
指定多个背景很简单：
.myclass {
background: background1, background 2, ..., backgroundN;
}
你既可以使用简写属性 background 来设置多个背景，也可以使用除 background-color 外的独立属性来设置多个背景。即下面的属性可以用属性列表来设置每一个背景： background，background-attachment，background-clip, background-image，background-origin，background-position， background-repeat， background-size。
示例
该例中，三个背景进行堆叠：火狐标志,一个线性渐变， 和一张带有花的图片：
.multi_bg_example {
background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background-repeat: no-repeat, no-repeat, repeat;
background-position: bottom right, left, right;
}
| 结果 |
 |
如你所见，火狐标志（列表第一项）在最上面，紧接着是放在图片上面的线性渐变。每个子属性 (background-repeat 和 background-position) 应用于对应的背景。因此属性 background-repeat 的第一个值应用于第一个（最前面）的背景，依次可推。