css精灵技术用像素定位,css精灵图怎么定位

精灵图利用background-image，background-repeat，background-position的组合进行背景定位，background-position属性可以用数字能精确的定位出背景图片在布局盒子对象位置。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css精灵图，其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。

这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

精灵图产生背景：

1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。

2、网页上的图像过多时，服务器就会频繁地接受和发送请求，大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(CSS Sprites)

精灵图的定义：

1、很多图片融合在一张图上，通过背景定位的方式将图标显示在每个盒子中。

2、背景定位的方式主要通过控制x和y轴的值。

利用“background-image”，“background- repeat”，“bac