CSS精灵图-sprite

目录

一、介绍

二、优点

三、使用步骤

步骤一

步骤二

步骤三

步骤四：引入所需精灵图

步骤五

四、步骤代码总结

---

一、介绍

CSS精灵图是把一堆小的图片整合到一张大的图片上，这样可以减轻服务器对图片的请求数量，再利用CSS的 background-image，background- repeat，background-position 组合进行定位

二、优点

        减少网页的请求、提高页面性能、减少图片的字节

三、使用步骤

步骤一

        先写一个存放精灵图的标签，一般习惯用<i></i>标签，<span>也可

<span></span>
<i></i>

步骤二

        因为i或span标签是行内式，需要转换为块级元素        diaplay:block

步骤三

        将精灵图用ps或者其他图片软件打开，测量大小，如图，并设置宽高

 

width: 42px;
height: 50px;

步骤四：引入所需精灵图

background-image: url();

步骤五

        通过测量精灵图在整张图片中的位置距离，并使用 background-position 进行移动，如图，由图像可知，距离顶部有5px，距离左边有15px。

        background-position: -水平距离 -垂直距离;

 

 

background-position: -15px -5px;

四、步骤代码总结

i {
    display: block;
    width: ;
    height: ;
    background-image: url(xxxx);
    background-position: xx xx;
}