CSS Sprites的简单实例

为了提高页面的性能，了解了CSS Sprites；

所谓CSS Sprites实际上就是对一张图片的重复使用，而这张图片中包含了许多的小图片，我们通过background-image印日大图，利用background-position进行定位，选出该图片中你所需要的那一部分，再将其放在你所想放在的地方；

这么做可以减少网页的http请求以及图片的字节数；从而提高页面的性能；

核心为：

.pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);}
.pic1{background-position: 0px 0px;}
.pic2{background-position: -25px 0px;}
.pic3{background-position: 0px -25px;}
.pic4{background-position: -25px -25px;}

对于background-position的定位规则，我们可以查看W3C文档，实际上，左上就是（0px 0px），第一个值是水平方向，第二个值是垂直方向；那么可知，右上就是（-apx 0px），其中a就是右上这个小图片离大图左侧的距离；以此类推；

实例代码（实现一个响应式的导航栏）：

 
	
	




	

		
		house1
	
	

		
		house2
	
	

		
		house3
	
	

		
		house4
	

效果图如下所示：

还是用了一个媒体查询，CSS3的属性，即在屏幕宽度小于600px是，导航栏的每一项宽度变为100%；

如图：

以上就是CSS Sprites的一个简单实例，实际上应用非常广泛！！！