css sprite

老子叫甜甜 提交于 2020-03-15 17:21:16

  雪碧图是优化网站性能的一个重要手段;  

  开发中,我们常常遇到这样的问题:一大堆的小icon图标,比如个性化的箭头、按钮等;当加载网页时,则要一个个地加载这些小图标,每一个小图标都需要http请求,这增加了网络延迟的可能;

  假设把这些小图标都放到一张图片中,使用的时候直接获取图片对应位置上的图标,那么网页加载时只需要请求这一张图片,显然这种方式减少了http请求;

css sprite原理

  CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置

.sprite{
     width: 23px;
     height: 23px;
     background-image: url('./images/sprite.png');
     background-repeat: no-repeat;
     background-position: 28px 50px;  //精确定位图片位置  
}

 

制作雪碧图

  如何制作css sprite呢? 目前主要有两种方式:

    1.利用工具手动添加制作雪碧图,这种工具有很多,比如spritebox等;这种在制作完雪碧图后,还需要手写css指定不同的小图标;

    2.使用sass,compass组合生成雪碧图;这种方式在生成雪碧图的同时,会生成css文件,直接从css文件中使用对应小图标的类即可,非常方便;

 

 

 

 

参考:(优质的文档能够准确,快速地理解掌握知识点;感谢以下文档)

[1] 使用compass生成雪碧图

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!