CSS3 - 同一元素使用多个背景图片(附纯CSS实现滑动门技术)
作者:hangge | 2015-10-31 11:01
1,给一个盒子设置多张背景图
2,使用纯CSS实现滑动门技术
过去实现滑动门极其费时费力。使用CSS3可以很轻易的实现背景的自由缩放。只需使用三张背景图片:左右两侧固定大小图片,中间窄窄的用于平铺的图片。
background-image 允许设定任意数量的图片。同时使用 background-position 和 background-repeat 控制它们的位置和是否重复。
下面分别给div的左上角和右下角设置角标图片,不管div大小如何变化,图片始终在角落。
<style>
.box1 {
padding-top:40px;
padding-left:40px;
border:1px solid #000;
background-image: url('top-left.png'), url('bottom-right.png');
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}
</style>
<div class="box1" style="width:160px;height:80px">
www.hangge.com
</div>
(注意:如果浏览器不支持多背景,那么它会完全忽略这些背景属性。为避免全有全无的结果。最好先用background或者background-image属性设置一个后备的背景颜色或图片。然后再继续用background-image设置多张图片。)2,使用纯CSS实现滑动门技术
过去实现滑动门极其费时费力。使用CSS3可以很轻易的实现背景的自由缩放。只需使用三张背景图片:左右两侧固定大小图片,中间窄窄的用于平铺的图片。
<style>
.box1 {
background-image: url('left.png'), url('right.png'), url('middle.png');
background-position: left top, right bottom, left top;
background-repeat: no-repeat, no-repeat, repeat-x;
}
</style>
<div class="box1" style="width:250px;height:69px"></div>
全部评论(0)