关于精灵图

关于精灵图

全栈程序员-站长 • 2022年5月29日下午11:46 • 未分类 • 阅读 58

大家好，又见面了，我是你们的朋友全栈君。

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

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

具体步骤：
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>

原文作者： https://blog.csdn.net/twilight_karl/article/details/54914866

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/139326.html原文链接：https://javaforall.net