一、 什么是css sprites
CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合并为一张整图，然后再利用background-position进行背景图定位的一种技术。
二、为什么需要css sprites
CSS Sprites 并不是一门新的技术了，目前他发展的已经比较成熟，阿里巴巴、百度、谷歌等各公司的网页中到处都可以发现CSS Sprites 的影子。他是网页里常见的一种图片应用处理方式，他允许你将一个页面里所涉及到的所=有的零星的图片都整合到一张大图中去，这样一来，当访问这个页面时，所加载的图片就不会像以前那样一张一张的慢慢显示出来了，对于当前的网络所流行的速度来说，不超出200kb的单张图片所需要的加载时间基本是差不多的，节省加载速度的关键不是降低重量，而是减少个数，就因为计算机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。所以，图片越多，所请求的次数就越多。为了减少HTTP的请求次数，很多网站的导航背景图、登录框、按钮背景图等并不使用
三、CSS Sprites的优势
在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负担，提高网页的加载速度。
因为假我们现在有9张小图片，那么就会就有9个HTTP请求，但是如果把这九张小图放在一张大图里，那就只需要请求1次，因为你要的9个小图都在一张大图里了，请求一次后不用再次发送HTTP请求去请求图片资源。
当页面加载时，不是去加载每一个单独的图片，而是一次加载整个组合图片。它大大减少了HTTP请求的次数，减轻服务器的压力，同时也缩短了悬停时候加载图片所需要的时间延迟，使效果更流畅。
随着页面设计向着精致、 巧妙的方向发展，便开始考虑用非Js的方法制作鼠标滑过、悬停菜单的效果，这时精灵图应运而生。
四、css sprites实例示例教程
1、sprites实例教程解释介绍
首先这些素材图标都是用ps放在同一张图片上，然后实现成列表类布局。使用css sprites实现此布局然后使用background样式进行实现。
此导航的布局我们使用ul 无序列表进行布局，每个li站一行排版，每个列表项的图标不相同为了区别所以对li设置不同class名，不同class对应设置定位相应的图标。
2、想要实现的效果
3、 接下来操作一波
学习交流群：330336289 邀请码：联盟
4、总结
重点：背景background-position属性有两个值，第一个代表水平位置的值（可为正可为负），第二个代表垂直方向的值（可为正可为负），当为正数时，代表背景图片作为对象盒子背景图片时靠左和靠上多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片超出盒子对象左边多远，超出盒子对象上边多远开始显示此背景图片。
CSS sprites技巧技术总结CSS sprites其实就是对background样式的扩展应用，以前设置背景图位置时常见为正数，设置背景靠左靠上距离多少像px开始显示图片，为负数值后，是将图片拖离左边上边多少像素开始显示图片，同时需要学会photoshop工具精确量出距离值。
网友评论