利用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>