精灵图(css sprites)也叫雪碧图,就是把许多图片制作成一图片。常用来存放图标。通过设置位置来显示你需要的图片。下图是一个例图。
优点:减少获取资源的次数, 提高了速度。
这里介绍一个获取精灵图位置的工具:
http://www.spritecow.com/
1.点击open image
2.点击select Sprite,点击你需要的图标,复制下面自动生成的代码即可。
例:
<style>
.icon1{
background: url('./assets/jingLing.png') no-repeat -192px 0;
width: 26px;
height: 13px;
/*记得加inline-block, 否则无法设置宽高
(i元素是display:inline;无法设置宽高)*/
display: inline-block;
}
</style>
<body>
<div class="box">
<i class="icon1"></i>
</div>
</body>
效果: