之前就发现一些网站吧所有的小图标拼接在一张图片中，但是一直不知道这是怎么做到的，今天特地了解了一下，才知道这种用法叫做精灵图。他的优点是可以减少浏览器请求的次数，把所有图片拼接在一张图中就只需要请求一次，当浏览器需要用到图片时再从大图片中解析。这样可以加快访问的次数。先来看看效果图：

拼接的图片：

他的原理是，先规定好每个小图标的大小，创建一个和小图标大小相同的容器，再通过移动背景图片的方法将大图中需要的部分暴露在这个容器中。就是说这张图片就像被一块布遮住，只是在想要的地方留了一个空，好让背景图片暴露出来，这样只要将将背景图片一道合适的位置就可以只显示我们想要的部分。

具体步骤：
1，创建合适大小的容器
2，将拼接的大图作为容器的背景，并设置为no-repeat
3，改变背景的位置

对于改变背景的位置我们需要知道小图标在大图片的的坐标（以大图的左上角为原点），例如如果小图标在大图中的坐标是(10,20)，那么将背景图片向左移动10px,向上移动20px就可以抵消小图标在大图的位置。
获取这个坐标可以用PS中的切片工具，将小图标选择出来后右击选择编辑即可看到小图标的坐标

完整源码如下：

<html>
    <head>
        <style>
        *{
            margin:0;
            padding:0;
        }
        .div0{
            margin:10px;

        }
        .demo1,.demo2,.demo3,.demo4,.demo5,.demo6{
            display:inline-block;
            width:17px;
            height:17px;
            background-color:transparent;
            background-image:url(ico.png);
            background-repeat:no-repeat;
        }
        .demo1{ background-position:-38px -37px;}
        .demo2{ background-position:-62px -37px;}
        .demo3{ background-position:-86px -37px;}
        .demo4{ background-position:-110px -37px;}
        .demo5{ background-position:-134px -37px;}
        .demo6{ background-position:-159px -37px;}
        ul{
            list-style:none;
        }
        ul li {
            margin:10px;
        }

        </style>
    </head>

    <body>
    <div class="div0">
        <ul>
            <li><div class="demo1"></div> 图标1</li>
            <li><div class="demo2"></div> 图标2</li>
            <li><div class="demo3"></div> 图标3</li>
            <li><div class="demo4"></div> 图标4</li>
            <li><div class="demo5"></div> 图标5</li>
            <li><div class="demo6"></div> 图标6</li>
        </ul>
    </div>

    </body>
</html>
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生