长时间写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盒子定位即可。
这样做出来的图片就像有了动画的样子,鼠标移上去就会变颜色:
示例下载:
--597