CSS 图片偏移技术以及坐标问题

CSS中通过图片偏移技术可以实现将众多小图标放入一个图片中 ,网页加载时只需要加载一个图片即可实现得到众多小图标的功能。这是前端设计时候对图片的一种优化方式。

图片偏移技术只是一个属性而已，即:background-position: -100px -50px;  这个属性的第一个属性值是x轴的偏移量,第二个属性值是Y轴的偏移量

通过下面我自己编辑的一副图片来具体了解一下图片偏移技术的取值问题。 

将主图看成是一个坐标系,原点是左上角，坐标系的X轴正向是向右，Y轴的正向是向下,background-position中的值是通过移动图片来得到值得。