任鸟飞网站设计博客

利用CSS3的Multiple backgrounds特性可以对某一元素设置多个背景图片，从而避免大量HTML代码的嵌套，降低HTML代码层级。

实现Multiple backgrounds只需要在background属性中设置多个背景路径即可，当然，为了达到期待中的效果，你需要对各个背景图片实行定位。

示例预览：CSS3 multiple backgrounds | CSS3 多层背景

为了实现上面的效果，我们制作了4张图片，分别代表4个位置（左上 右上 左下 右下）。

CSS 代码

background:
    url(right-top-bg.gif) top right  no-repeat,
    url(left-top-bg.gif) top left  no-repeat,
    url(left-bottom-bg.gif) bottom left  no-repeat,
    url(right-bottom-bg.gif) bottom right  no-repeat;

HTML代码：

<div class="multiple-backgrounds">
<h2>CSS3 Multiple backgrounds <br />多层背景</h2>
</div>

下载 css multiple backgrounds | CSS3 多层背景 源代码