示例代码：多背景图片

使用这种技术我们可以重现类似于Silverback网站中只使用一个HTML元素的多背景图片效果。

该元素拥有自己的背景图片和需要填充的空间。将该元素相对定位后作为其伪元素的绝对定位参考点。使用正值的z-index将有助于伪元素选择合适的z-index值（小志注：对于这句的翻译思考了很久一直没能选择合适的词来表达，主要的意思根据下面的代码我们可以看到是将伪元素的z-index值设置比元素自身的小即可，最好是用负值）。
Copy to clipboard]View Code CSS1
 #silverback {
 position:relative;
 z-index:1;
 min-width:200px;
 min-height:200px;
 padding:120px 200px 50px;
 background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}

两个伪元素将会通过绝对定位的方式固定在该元素的两边。设置z-index值为-1将伪元素移到内容层的后面。这样伪元素将会位于元素的背景和边框上面，但是该元素的内容依然可以选择。
Copy to clipboard]View Code CSS1
 #silverback:before,
#silverback:after {
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 right:0;
 bottom:0;
 padding-top:100px;
}

每个伪元素都拥有一个可重复的背景图片属性。这是实现类型多重背景效果所需要的。

伪元素的content属性允许添加图片内容。这样我们就可以添加两张图片在一个伪元素中。可以通过改变伪元素的其他属性改变图片的位置，例如text-align和padding。
Copy to clipboard]View Code CSS1
#silverback:before {
 content:url(gorilla-1.png);
 padding-left:3%;
 text-align:left;
 background:transparent url(vines-mid.png) 300% 0 repeat-x;
}
 
#silverback:after {
 content:url(gorilla-2.png);
 padding-right:3%;
 text-align:right;
 background:transparent url(vines-front.png) 70% 0 repeat-x;
}

使用CSS2.1的多重背景图效果成品。

出处：小志博客
责任编辑：bluehearts

上一页 css2.1实现多重背景和边框效果 [1] 下一页 css2.1实现多重背景和边框效果 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。