CSS中背景图片区域截取技术

在网页前端的制作中，有些时候我们会用到大量的图片。里面包括了很多系列的图片，这个时候我们制作图片的时候大多数人都喜欢把几个或者几十个小图标做在一张图片上，这样可以极大的减少浏览器请求文件的次数，也更利于我们管理图片文件。

我们在使用的时候，利用容器的大小和加载图片时候移动图片的位置在截取我们需要的图片，需要以背景图片的方式载入图片。

比如我们有如下图片：

在载入图片的时候如果我们需要使用左边的，就是灰色的那个区域，那么CSS代码为：

view plainprint?

1. #testDiv{  
2.     width:15px;  
3.     height:15px;  
4.     background-image:url(图片路径);  
5.     background-repeat:no-repeat;  
6.     background-position:0px 0px;  
7. }  

主要代码为：background-position:0px 0px;意思是背景图片不懂,因为我们容器的大小为15x15，而图片大小为30x15，所以这样效果就是只会显示左边的部分。

同样，要显示右边的部分代码如下：

view plainprint?

1. #testDiv{  
2.     width:15px;  
3.     height:15px;  
4.     background-image:url(图片路径);  
5.     background-repeat:no-repeat;  
6.     background-position:-15px 0px;  
7. }  

这里变了：background-position:-15px 0px;就是把背景图片往左了移动了15个像素，这样右边的部分就刚好显示出来了。