CSS3 - 同一元素使用多个背景图片（附纯CSS实现滑动门技术）

2015-10-31 发布：hangge 阅读：4390

1，给一个盒子设置多张背景图

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>