CSS精灵图Sprite，offset()方法 获取偏移位置

一.CSS精灵图Sprite

精灵技术：就是一种处理网页背景图像的方式，它需要将一个页面中涉及到的所有或一部分较小的背景图像合并到一张较大的图片中，然后再将这个图片应用到网页中。通常情况下，我们只是将背景图像中那些较小的、零碎的图像集中到一个大的图像中，这个较大的图像被称为精灵图（也被称为雪碧图）

1.利用CSS的“background-image”，“background-repeat‘，”background-position“的组合进行背景定位； background-position 来移动背景图（用数字精准定位出背景图片的位置），从而只显示背景图的一部分。如下图（无效果图）

2.优点：

• 使用精灵图可以减少图片的体积；
• 也可以显著的减少对服务器的请求次数；
• 提高网页的加载速度
• 解决命名困扰（只需要在集合的图片命名）
• 更换风格方便（只需改变一张或少张图片上的样式）

3.缺点：

• 在图片合并的时候，需要把多张图片有序的、合理的合并成一张图片，每个小图之间需要预留足够的空间（photoshop或其他工具测量计算每个背景单元的精确位置）；
• 在宽屏或者高分辨率的屏幕下来自适应页面宽度时，如果图片不够宽，会出现背景断裂；
• 精灵图在维护的时候比较麻烦，如果页面背景有少许改动，就需要修改整个精灵图。

二.offset()方法（获取元素相对于文档的偏移位置）

1.offset() 方法返回或设置匹配元素相对于document文档的偏移位置

2.该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。