CSS Sprite CSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式。 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。 再利用CSS的"background-image"，"background-repeat ...

一、精灵图使用场景： 二、Css Sprite（优点） 减少图片的字节。 减少网页的http请求，从而大大的提高页面的性能。 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率 ...

一、精灵技术产生的背景 　　图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 　 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度 ...

图片大小80*40，即每张图片大小40*40，如何以20*20显示图片？1. 首先看下如何以40*40显示第二张图片： 2. 接下来以20*20显示第一张图片： 3.总结：诀窍在于，背景图片缩小固定的比例，背景图片的偏移量也缩小相应的比例。 ...

css sprite 俗称：精灵图，雪碧图，指将整个页面不同的图片or图标合并在一张图上；优点：使用CSS Sprite 可以减少网络请求，提高网页加载性能，不会出现网页上端加载完毕下面还在加载中这一问题 缺点：如果后期更改其中某一图标，且其像素大小发生改变，需要重新对所有图标进行定位 精灵 ...

一、什么是雪碧图？ 1、我们先来看一下淘宝上面用到的雪碧图实例： a、前端展示 b、css雪碧图为 2、概念 CSS sprite在国内很多人 ...

1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat ...

　　在写网页过程中，会遇到这种需要使用多个小图标: 　　 　　如上图中的「女装」文字左边的图标。容易想到的解决方法是为每张图片加入>标签，但这样做会增加HTTP请求数量，影响网站加载速度。比这更优的解决方案是：雪碧图sprite。 　　所谓雪碧图就是把我们所需要的所有小 ...