CSSSprites (CSS精灵图)
... 2025-7-10 大约 3 分钟
# CSS Sprite
在计算机图形学中，sprites 指的是包含于场景中的二维图像或者动画。
最开始这项技术是应用于街机游戏中，里面的人物和可移动物品大多数都是应用了 sprites。
精灵并不是帧缓冲中位图数据的一部分，而是“悬浮”于帧缓冲中的数据之上，没有对其中的数据产生影响，就像幽灵和精灵一样。
CSS Sprites ：精灵图或者雪碧图，是一种网页图片应用处理方式。
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中。
再利用 CSS 的"background-image"，"background-repeat"，"background-position"的组合进行背景定位，background-position 可以用数字精确的定位出背景图片的位置。
# 为什么建议使用 CSS Sprite
在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。
所以，CSS Sprites 技术加速的关键，并不是降低质量，而是减少个数，当然随之而来的增加内存消耗，CSS Sprites 图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。
# CSS Sprites 的优点：
- 减少图片的字节
- 减少了网页的 http 请求，减少 http 报文，节省流量，增加访问速度，提高网页的性能。
- 减少命名难的问题
# CSS Sprites 的缺点：
- 制作雪碧图都很繁琐，增大前端和 UI 的工作量
- 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。
- 难以实现自适应：在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂。
- 维护特别困难，每次要加或者换图片都需要重新制作一整张图片
# background-position
background-position 属性设置背景图像的起始位置。
注意：对于这个工作在 Firefox 和 Opera，background-attachment 必须设置为 "fixed（固定）"。
默认值: 0% 0%
继承: no
版本: CSS1
JavaScript 语法: object object.style.backgroundPosition="center"
属性值
方向关键字
left top|left center|left bottom|right top|right center|right bottom|center top|center center|center bottom
如果仅指定一个关键字，其他值将会是"center"
百分比
x% y%
第一个值是水平位置，第二个值是垂直。左上角是 0％0％。右下角是 100％100％。
如果仅指定了一个值，其他值将是 50％。
数值
xpos ypos
第一个值是水平位置，第二个值是垂直。左上角是 0。单位可以是像素（0px0px）或任何其他 CSS 单位。
如果仅指定了一个值，其他值将是 50％。你可以混合使用％和 positions
继承
inherit
指定 background-position 属性设置应该从父元素继承