使用CSS的多背景

通过使用 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;
}
结果
css_multibg.png

如你所见，火狐标志（列表第一项）在最上面，紧接着是放在图片上面的线性渐变。每个子属性 (background-repeat 和 background-position) 应用于对应的背景。因此属性 background-repeat 的第一个值应用于第一个（最前面）的背景，依次可推。

其它

 
 
相关主题