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

作者:     目录: PHP+MySQL     发表: 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 多层背景 源代码

♥阿里云服务器♥

云服务器,性价比高,建站首选。

阿里云服务器

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝现金红包 每天可领

♥淘宝现金红包♥

淘宝粉丝福利,金额随机,使用无门槛,手机淘宝扫码直接领取现金红包。

淘宝现金红包

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据