通过使用 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
的第一个值应用于第一个(最前面)的背景,依次可推。