关于精灵图

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

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

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

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

相关推荐

  • pycharm向左缩进_pycharm取消缩进快捷键

    pycharm向左缩进_pycharm取消缩进快捷键在使用pycharm时,经常会需要多行代码同时缩进、左移,pycharm提供了快捷方式1、pycharm使多行代码同时缩进鼠标选中多行代码后,按下Tab键,一次向右缩进四个字符2、pycharm使多行代码同时左移鼠标选中多行代码后,同时按住shift+Tab键,一次向左移四个字符另外:在使用pycharm过程中光标变粗,此时变成了改写模式,只需要按下键盘的insert键即可…

  • python命名规则标识符_python中有效的标识符

    python命名规则标识符_python中有效的标识符标识符规则1、由大小写字母、数字和下划线组成,只能以字母或者下划线开头。2、不能高阔除下划线以外的其他热河字符,如%……%¥#@3、不能包含换行符、空格和制表符等空白字符。4、不能使用Python中的关键字和约定俗成的名称,如print5、Python区分大小写。…

  • PHP获取指定月份的第一天开始和最后一天结束的时间戳函数

    一个php获取月中第一天和最后一天的函数,网上搜集的函数,不过这个函数感觉实现的有点繁琐了.本篇文章推荐阅读里也有一篇同样的函数,大家也可以看一下.推荐:http://www.cnblogs.com

    2021年12月24日
  • docker搭建kafka集群

    docker搭建kafka集群docker搭建kafka集群我在M1mbp上使用的以下镜像新建文件zk-kafka-docker-compose.ymlversion:”2″services:zookeeper:user:rootimage:docker.io/zookeeperports:-“12181:2181″environment:-ALLOW_ANONYMOUS_LOGIN=yesvolumes:-zoo

  • Hadoop生态圈的核心组件包括哪些

    Hadoop生态圈的核心组件包括哪些Hadoop生态圈的核心组件包括哪些Hadoop是现在最流行的大数据分布式基础架构,其实现了很多大数据相关的核心功能,并且支持大量的核心项目。那么,今天小编就给大家盘点一下Hadoop生态圈核心组件,感兴趣的小伙伴快来学习下吧!1、Hbase:一个基于列的存储的分布式数据库,其数据模型为Key-Value模式,便于扩展并且查询高效。2、Hive:Hive是Hadoop提供的一个数据仓库,也提供数据库部分功能。其最大的作用还是简化了编写MapReduce程序的过程,只需要利用SQL语句即可完成MapRe

  • Spring Cloud微服务架构图

    Spring Cloud微服务架构图SpringCloud微服务架构图相关技术名词说明SpringCloudGatewaySpringCloudGateway是SpringCloud的一个全新项目,该项目是基于Spring5.0,SpringBoot2.0和ProjectReactor等技术开发的网关,它旨在为微服务架构提供一种简单有效的统一的API路由管理方式。SpringCloudGateway是基于WebFlux框架实现的,而WebFlux框架底层则使用了高性能的Reactor模式通信

发表回复

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

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