CSS sprite两种实现方式：background-position和clip:rect()

 

CSS Sprite是一种网页图片应用处理方式。为了节约图片资源，我们可以把网页上的小图片整合到一张大图上，这种方式称为CSS Sprite，也被称为CSS雪碧图。

实现方式一：background-position

通常情况下，我们可以利用元素区域外内容不可见的特性配合background-position进行背景定位。

	<div class="sprite"></div>

		.sprite {
			width: 54px;
			height: 54px;
			position: relative;
			background-image: url(sprite.png);
			background-repeat: no-repeat;
		}
		.sprite:hover {background-position: 0 -62px;}

 

实现方式二：clip:rect()

除此之外，还可以使用clip属性进行剪切定位。

	<div class="sprite">
		<img src="sprite.png" alt="">	
	</div>

 

		.sprite {
			width: 54px;
			height: 54px;
		}
		.sprite img {
			position: absolute;
			clip: rect(0 54px 54px 0);
		}
		.sprite img:hover {
			margin-top: -64px;
			clip: rect(64px 54px 118px 0);
		}

 clip属性有两点需要注意：

1.clip 属性剪裁绝对定位元素（position:absolute）；

2.唯一合法的形状值是：rect (top, right, bottom, left)。

rect (top, right, bottom, left)分别指最终剪裁可见区域的上边，右边，下边与左边；

如下图rect(30px 200px 200px 20px)：

注：参考资料来自CSS clip:rect矩形剪裁功能及一些应用介绍