0元购京东自营斐讯K2路由器返399元活动
置顶

CSS3新增特性Multiple backgrounds(多层背景)使用方法

作者:     目录: 小代码     发表: 2010年04月02日

利用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 多层背景 源代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注