什么叫做 css sprites 呢？ #

CSS Sprites 在国内很多人叫 css 精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于 200KB 的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字精确的定位出背景图片的位置。 在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。 所以，CSS Sprites 技术加速的关键，并不是降低质量，而是减少个数，当然随之而来的增加内存消耗，CSS Sprites 图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。

首先，如果想知道如何获取图片坐标的话，这里就不 bb 了，也不想原创写如何获取了，太麻烦了，而且有现成的，讲得很好，我也不想复制下来。 哔哔哔哔哔

接下来是原创内容。。

看了获取之后的教程，你可能有疑惑？ ##有时候失效呢？ 引用整个图片时候，no——repeat 没有写哦

background: url(00.png) no-repeat;

为什么 css 定位 x，y 轴是负值 #

可以这么理解：假如我们手头有图片，里面小图标（这边简单点，只是个 x 轴移动）

这样，我们想获取第一个图标的话，很简单就是 background-position:0 0;

但是如果想获取第二个图标的话，如果是 background-position:20px 0，那么图标就会不见，如果是-20px 的话图片才出现

那是因为我们使用这个 css 是让图片本身发生移动，而不是坐标轴（之前一直以为坐标轴动，不好理解）我们如果写 20px，那么图片就会向右远离原点 20px，而坐标原点就是该整个图片的左上角，没有变化

如果是-20px ，就相当于把图片向左移动了 20px，说点简单的，那么就是，第二个图标将会取代第一个图标的位置

最后需要再规定大小，图标就独立出来了~

yeah，好好学习，天天向上