hello~(????)~
大噶好~
今天给大家分享下前端的神奇技术：雪碧图
①.定义
css雪碧图又叫css精灵，是一种css图像合并技术，即将许多小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分，此处的图片是在CSS中定义，而非img标签。
②.使用
（1）?使用backgroundshy;imageeg:backgroundshy;image:url(imgs/button.png)?
（2）?再控制backgroundshy;position属性值来确定图片呈现的位置
eg:backgroundshy;position:00?//表示背景图片在雪碧图的起始位置为x:0?y:0?
③.?backgroundshy;position的属性值：
backgroundshy;position有两个属性值，backgroundshy;position：X
Y，用法上可以对其中一个属性单独使用，
backgroundshy;positionshy;x和backgroundshy;positionshy;y。
backgroundshy;position属性值有三种情况：
注：backgroundshy;position：px?50px??这个属性值意味着图片在距离自身容?x轴为px、y轴为50px的位置作为图片显示的起点位置；
然而使用百分比来设置属性值，是以自身容?的长宽减去图片的长宽乘以百分比所得的数值来确定图片的起始位置。
④.举例
附：
效果：
注意：backgroundshy;position的负值
以上面的示范为例，span标签是一个25px长宽的容?，在使用背景图时，背景图的初始位置会从容?的开始布满整个容?，但是容?的大小限制了背景图呈现的大小，超出的部分被隐藏。
上例中如果需要在容?中显示第二个图标，意味着雪碧图x轴方向要向左移动，左移雪碧图即设置它的值为负值，同理y轴方向也一样。
⑤.优点
1.减少加载网页图片时对服务?的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务?的请求次数，降低服务?压力，同时提高了页面的加载速度，节约服务?的流量。
2.减少加载网页图片时对服务?的请求次数可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务?的请求次数，降低服务?压力，同时提高了页面的加载速度，节约服务?的流量。
3.提高页面的加载速度sprite技术的其中一个好处是图片的加载时间(在有许多sprite时，单张图片的加载时间)。由所需图片拼成的一张GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的GIF只有相关的一个色表，而单独分割的每一张GIF都有自己的一个色表，这就增加了总体的大小。因此，单独的一张JPEG或者PNGsprite在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
4.减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
⑥.不足
CSS雪碧的最大问题是内存使用
除非这个雪碧图片是被非常小心的组织，你就会最终使用大量的无用的空白。一个例子是来自于WHITTV的网站。（这块是看网上的资料）
注意这是一个×15,像素的PNG图片。
它也被压缩的很好——实际下载大小只有大概26K??—???但是浏览?并不会渲染压缩后的图片数据。当这个图片被下载并被解压缩之后，它将占用差不多75MB的内存(*15*4)。
如果这个图片并没有使用alpha透明，它将会被优化至*15?*?3，但是要在损失渲染速度的情况下。
即使那样，我们也会讨论55MB。这张图片的大部分其实就是空白，那里什么都没有，没没有任何有用的内容。只是加载WHIT主页???就会导致你的浏览?的内存占用上升到至少75+MB，仅仅是因为那一张图片。
（PS:遗憾的是，该网站最近已经改版，文中提到的图片已经不存在了）
影响浏览?的缩放功能如果一个使用CSS雪碧的页面使用一些浏览?提供的整页缩放功能缩放了，浏览?就需要做一些额外的工作来纠正这些图片边缘的行为——基本上来说，是为了避免雪碧中相邻的图片被“露进来”。
?这对于小图片没有什么问题，但是对于大图片会是一个性能下降。
拼图维护比较麻烦拼合这么多图片，需要耐心。同时还要时刻思考如何在使用这个图片是不会产生相互的影响。将又瘦又高的图片和又宽又矮的图片放到一起时，不容易操作。如果要修改雪碧中的一个图片，你就要修改整张图片，这无疑会增大工作量。
使CSS的编写变得困难如果CSS雪碧足够复杂，则大大增加了CSS的代码量和难度，让维护和修改变得困难起来。
CSS雪碧调用的图片不能被打印CSS雪碧调用的图片不能被打印，除非在
media中特别添加print声明。错误得使用Sprites影响可访问性一些刚入门的开发人员会为了节省HTTP请求数(这是使用CSSSprite一直强调的好处)而把所有的图片都当背景图片来处理–甚至是那些传达重要信息的图片。结果会导致一个缺乏可访问性的网站，也会降低HTML中title和alt的潜在益处。
因此，CSS?sprite?本身没错，而且也不会引发可访问性问题(事实上，正确得使用会提高可访问性)。但是不分对错得过度使用sprite会阻碍具有可访问性和生产率方面的网页建设进程。
*?゜??*:.?..?.:*?(*?▽?*)?*:.?..?.:*?゜??*
程序员食堂用了这么久了，
还没