运用background-position在大图中抠出小图用法

长时间写CSS代码会发现一个情况，很多小图标素材会放在一个大的图片中。

如图所示，这种将图标汇集在一张图片上，如何使用自己想用的图标，这里就使用到CSS中background-position属性。这个属性是将图片背景定位。

比如我们想在这张大图里抠出空调这个小图标：

<style>
.main{ background:url(index_ico_png32.png) no-repeat; 
       width:25px;
       height:25px;
       }
</style>
<div class="main">
<a href="#"><i></i></a>
</div>

首先我们需要先将这个图片引进来，插入图片并设置这个图片的大小。现在开始运用到定位了：以图片的左上角定点开始，分别测量小图片在大图片所在的位置。以绿色方框为div，需要截取到空调小图标那么定位的大小一定是负数或0；

<style>
.main{ background:url(index_ico_png32.png) no-repeat; 
       width:25px;
       height:25px;
       background-position:0px -202px;
       }
</style>
<div class="main">
<a href="#"><i></i></a>
</div>

当设完他的大小和定位后就可以截取到这个小图标了：

想要图标实现动画的效果其实只需要用：hover方法；

在：hover{ } 中定位即可；

.main{ background:url(index_ico_png32.png) no-repeat; 
       width:25px;
       height:25px;
       background-position:0px -202px;
       }
 .main:hover{ background-position: 0px -250px;}

如果需要截取多个同款小图标有比较简便的方法：

<style>
body{ margin:0; padding:0; margin:0 auto;}
.main{ margin:0 auto; background:url(index_ico_png32.png) no-repeat;  width:25px; height:25px;}
.main1{background-position:0px -202px;}
.main2{background-position:0px -225px;}
.main1:hover{ background-position: 0px -250px;}
.main2:hover{ background-position: 0px -273px;}
</style>


<div class="main main1">
<a href="#"><i></i></a>
</div>
<div class="main main2">
<a><i></i></a>
</div>

把图片引入后只需每个div盒子定位即可。

这样做出来的图片就像有了动画的样子，鼠标移上去就会变颜色：

示例下载： 

css抠图.zip

--597