万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

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

luping 2016-01-07 技术

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

index_ico_png32.png

如图所示,这种将图标汇集在一张图片上,如何使用自己想用的图标,这里就使用到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;

未标题-21.jpg


<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>


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

blob.png

想要图标实现动画的效果其实只需要用: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盒子定位即可。

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

blob.png

示例下载: 

css抠图.zip


--597




文章关键词
CSS抠图
background-position
CSS
qq qq tel
服务热线:

134-1954-9128