css sprite技术

CSS Sprites简介

　　通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。
　　说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
　　当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

简单介绍一下 CSS Sprites 的优点：

• 当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
• CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

实现方法：

1. 首先将小图片整合到一张大的图片上
2. 然后根据具体图标在大图上的位置，给背景定位。
   background-position:-8px -95px;

CSS Sprites的最初的想法是可以通过<img>标签和JAVASCRIPT中的onmouseover和onmouseout的事件使用CSS来切换一张大图片中的坐标位置显示到DIV上来实现图片的变化。

主要的功能是通过背景图片的定位来显示图片的局部，当很多小图片放在一张图片上然后加载，就可以减少图片加载时服务器的开销

如亚马逊网站的各类图标：

只需一张图片即可完成加载所有的按钮和图标。

下面就来介绍一下CSS Sprites的工作原理

我们以上图来作为背景图片

初始坐标x=0,y=0的图片显示如下图

当变换了坐标值，则图片就沿左边向上或左方移动，如坐标为x=0,y=-48时，图片位置变为如下图

 

例子：

      在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。

我们使用下图sprite.png来作为例子：

新建两个DIV

1. <div class="max">最大化</div>  
2. <div class="min">最小化</div>  

配置CSS样式：

1. .min, .max {  
2.   width:16px;  
3.   height:16px;  
4.   background-image:url(sprite.png);  
5.   background-repeat: no-repeat; /*我们并不想让它平铺*/  
6.   text-indent:-999em; /*隐藏文本的一种方法*/  
7. }  

当还没有指定background-position时，默认为 0 0，可以看下图片，处于的位置正是灰块。接下来我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量，最大化按钮位于Y轴的350px处，最小化按钮位于Y轴400px处。需要向上移动图片，得到代码如下：

1. .max { background-position: 0 -350px;}  
2. .min { background-position: 0 -400px;}  

这样就完成了图片的定位显示，如果需要配置动态变更图片，只需在JS方法中变更background-position就可以了。