关于精灵图

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

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

之前就发现一些网站把所有的小图标拼接在一张图片中,但是一直不知道这是怎么做到的,今天特地了解了一下,才知道这种用法叫做精灵图。他的优点是可以减少浏览器请求的次数,把所有图片拼接在一张图中就只需要请求一次,当浏览器需要用到图片时再从大图片中解析。这样可以加快访问的次数。先来看看效果图:
在这里插入图片描述
拼接的图片:
在这里插入图片描述
他的原理是,先规定好每个小图标的大小,创建一个和小图标大小相同的容器,再通过移动背景图片的方法将大图中需要的部分暴露在这个容器中。就是说这张图片就像被一块布遮住,只是在想要的地方留了一个空,好让背景图片暴露出来,这样只要将将背景图片一道合适的位置就可以只显示我们想要的部分。

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139326.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Mysql海量数据处理

    Mysql海量数据处理一说海量数据有人就说了直接用大数据,那只能说不太了解这块,为此我们才要好好的去讲解一下海量的处理海量数据的处理分为两种情况1)表中有海量数据,但是每天不是很快的增长2)表中有还流量数据,而且每天很快速的增长针对这了两种情况,我们给出的解决方案也不太一样,而且也不是所有的项目都是这样的情况。海量数据的解决方案1)使用缓存2)页面静态化技术3)数据库优化4)分离数据库中活跃的…

  • 程序员必备的6个辅助开发的软件神器有哪些_程序员最喜欢的五大神器

    程序员必备的6个辅助开发的软件神器有哪些_程序员最喜欢的五大神器前言(欢迎评论区列出你认为牛逼的开发神器~)本文来自MeloDev的投稿,他的博客地址:http://www.jianshu.com/u/f5909165c1e8程序员必备简捷开发辅助工具总结写在前面:工欲善其事必先利其器,拥有简捷的开发辅助工具能大大提高我们程序猿的开发效率。Melo刚到学校就给大家总结了一些常用的辅助开发的工具,希望大家能喜欢,闲话不多说,马…

    2022年10月19日
  • SpringBoot整合Quartz定时任务(持久化到数据库)

    背景最近在做项目,项目中有个需求:需要使用定时任务,这个定时任务需要即时生效。查看Quartz官网之后发现:Quartz提供两种基本作业存储类型:RAMJobStore:RAM也就是内存,默认情况下Quartz会将任务调度存在内存中,这种方式性能是最好的,因为内存的速度是最快的。不好的地方就是数据缺乏持久性,但程序崩溃或者重新发布的时候,所有运行信息都会丢失JDBC作业存储:存到数据库…

  • 阿里云异构计算产品是如何保障双11业务的

    阿里云异构计算产品是如何保障双11业务的

  • YUI 3 Cookbook 中文版

    YUI 3 Cookbook 中文版《YUI3Cookbook》中文版基本信息作者:(美)歌尔(Goer,E.)译者:鲁超伍出版社:电子工业出版社ISBN:9787121196621上架时间:2013-4-7出版日期:2013年4月开本:16开页码:436版次:1-1所属分类:计算机&gt;软件与程序设计&gt;网络编程&gt;javascript更多关于》》》《…

  • jmeter性能测试实战视频(常用性能测试工具有哪些)

    1、搭建AUT第一步、下载所需文件   Discuz_***.zip——源码程序文件,是PHP程序,简体中文GBK的下载地址是http://download.comsenz.com/DiscuzX/3.1/Discuz_X3.1_SC_GBK.zip。   PHPnow_***.zip—–集成了Apache中间件、Mysql数据库和PHP,下载地址是http://servkit.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号