关于精灵图

最新推荐文章于 2024-05-16 17:48:19 发布

twilight0402

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量9.1k

点赞数 2

分类专栏： CSS 文章标签：浏览器移动精灵图图片

本文链接：https://blog.csdn.net/twilight_karl/article/details/54914866

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

拼接的图片：

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

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

twilight0402

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
关于精灵图

之前就发现一些网站吧所有的小图标拼接在一张图片中，但是一直不知道这是怎么做到的，今天特地了解了一下，才知道这种用法叫做精灵图。他的优点是可以减少浏览器请求的次数，把所有图片拼接在一张图中就只需要请求一次，当浏览器需要用到图片时再从大图片中解析。这样可以加快访问的次数。先来看看效果图：拼接的图片：他的原理是，先规定好每个小图标的大小，创建一个和小图标大小相同的容器，再通过移动背景图片的方法将大图中
复制链接

扫一扫