css精灵技术及好处

css精灵技术及好处

1、什么是精灵技术（CSS Sprites）？

过去，网页开发者喜欢把网页里面的字节数控制得非常小，往往在一个图片文件夹里散落着许多 小图片，客户端没显示一张图片都会向服务器发送一次请求，图片越多请求次数越多，这样就会造成图片加载延迟，影响用户体验。随着时代的快捷，用户会越来越重视上网速度，然后把这些小的图片整合到了一起，精灵技术出现了。

css精灵图也叫做css雪碧图，是一种应用于网页上的图片技术。 它可以将网页上涉及到的零星图片包含一张大的图片去加载使用。

如图为项目中精灵图片：

当设置在页面上后的效果，如图:

2、精灵技术的好处？

• 大大减少了图片的质量.
• 大大减少服务器的请求次数，网页加载速度变快.
• 原来需在服务器访问多次获取图片，现只获取一张图片即可.

3、 精灵技术使用的核心

首先我们知道，css精灵技术主要针对于背景图片，插入img图片是不需要这个技术的。

• 首先测量所需图片在整张精灵图上的为值，测量为X轴方向，Y轴方向。
• 使用background将精灵引入，并且确定好位置。
• 因为以左上角X，Y的0点，所以X，Y轴的距离均使用负值。

4、精灵技术的使用方法

运用精灵技术是通过CSS的 background-image 、background-repeat 、 background-position 属性组合进行背景定位，将一张大的图片的某一部分显示到网页的固定位置。

以文章上面的图片为例：

（1）第一步将精灵图设置在容器中，并添加样式

<div class="dome1">
        <a href="#" ></a>
        <a href="#" class="a2"></a>
        <a href="#" class="a3"></a>
         
    </div>

（2）第二步，给a标签设置背景图片，以及图片位置定位

<style>
      * {
        padding: 0;
        margin: 0;
      }
      p {
        margin-left: 10px;
        font-size: 10px;
      }
      .dome1 {
        float: left;
        text-align: center;
        margin-left: 10px;
      }

      .dome1 a {
        overflow: hidden;
        display: inline-block;
        width: 104px;
        height: 32px;
        background: url(./images/ico_footer.png) no-repeat left -151px;
      }
      .dome1 .a2 {
        background-position: -104px -151px;
      }
      .dome1 .a3 {
        background-position: 0px -184px;
      }
    </style>

（3）效果显示：

4、总结：

其实精灵技术就是将精灵图设为一个大背景，然后通过背景图片定位来移动背景图，从而显示需要显示在页面的内容。
当页面中需要加载的图片过多时，建议使用精灵技术，减少服务器请求，如果涉及的图片不多时，不建议使用。

精灵技术不足之处： 精灵技术，比较麻烦的点在于要计算各个图标的大小，位置多少才能显示图标，如果坐标偏移了一些的话，那么可能显示不全图标或者图标显示得偏左偏上等问题，需要计算好偏移多少才能更好的展示图标。