CSS雪碧图（精灵图）使用

　　1：CSS雪碧图：CSS雪碧图 即 CSS Sprites，也有人叫它CSS精灵图。

　　2：雪碧图的由来：一个网站的页面须要大量的小图片或者小图标，可是大量的图片若是放在服务器上，每次当打开网站而且向服务器发送请求，那么请求的次数将大大增长。由此出现了雪碧图的概念

　　3：用处：是一种CSS图像合并技术，方法是将众多小图标合并到同一张图上，用来减轻http请求压力。而后经过操做CSS的background属性，控制背景的位置以及大小，来展现须要的部分。

 

我也从网上找到了一张雪碧图：（其实就是一张图片放置各类各样的小图标）

　　　　　　　　　　　　　　　　　　　　　　

 

 

若是获取精灵图里的小图标呢？

 

第一步：咱们须要下载有关制做图片的软件 例如PS 和 FW  在这我用的是FW。

第二步：把图片在软件中打开。

　　　　打开后：

　　　　　　　　　1： 在FW的右侧中间层 有一个 图层，而后点击图层里面 有一个叫 位图  在前面的小方框点击一下 就会出现一把锁。这样就不怕把图片搞的乱七八糟的了。

　　　　　　　　2：在软件的左侧 WEB里有一个叫 “切片”工具 而后点击 用切片工具去选中精灵图里你想要的图标。

　　　　　　　　　3： 选中后在软件的下侧就能够查看你选中图片的宽和高 还有图标在图片的位置了。由于只有这种软件才能完美没有偏差的获取的到。

 

第三步：获取到你想要的值后，使用你的编程软件，在你个某个元素设置背景图片的时候先引进 精灵图，而后经过 background-position来定位。

 <div class="twoimage"></div>

　　

.twoimage{
            width:84px;
            height: 47px;
            background-image: url(images/cssjlt.png);
            background-position: -425px -250px;
        }

　　

这样就获取到精灵图里的小图标了，能够减小许多没必要要的图片。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2019-11-07   15:42:42