浅谈css精灵图(图片合成技术)

本篇文章给大家介绍一下css精灵图(图片合成技术)。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css精灵图(雪碧图、图片合成技术)

1、什么是css精灵图（sprite）？

css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

2、使用css精灵图（sprite）的方法

css精灵图（sprite）其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

3、代码实现：

使用到的精灵图（sprite）

精灵图分析：

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .sprites{
            width: 200px;
            margin: 50px auto;
        }
        .sprites div{
            margin: 5px;
        }
        .sprites span{
            float: left;
            width: 20px; 
            height:20px;
            background: url('./images/icon.png-600');/* 引用精灵图 */
            background-size: 60px 40px;
        }
        .sprites1{
            background-position: 0 0;
        }
        .sprites2{
            background-position: -20px 0 !important;
        }
        .sprites3{
            background-position: 0 -20px !important;
        }
        .sprites4{
            background-position: -20px -20px !important;
        }
        .sprites5{
            background-position: -40px 0 !important;
        }
    </style>

</head>
<body>
    <div class="sprites">
        <div><span class="sprites1"></span>付款图标</div>
        <div><span class="sprites2"></span>存款图标</div>
        <div><span class="sprites3"></span>删除图标</div>
        <div><span class="sprites4"></span>粘贴图标</div>
        <div><span class="sprites5"></span>笑脸图标</div>
    </div>
</body>
</html>

效果如图：