1. 全栈程序员必看首页

前端必备技能之如何制作精灵图「建议收藏」

全栈程序员-站长 • • 未分类 • 阅读 126

前端必备技能之如何制作精灵图「建议收藏」为什么要用精灵图？比如京东首页的这些icon，如果每个icon都去请求一个资源。是非常浪费资源的。因为我们浏览器在同一个域名下并发加载的资源(CSS、JS、图片等)数量是有限的。我们可以将这些icon放到一张图片，通过截取这张图片的不同的区域，拿到不同的icon制作一个背景透明的Icon截图你喜欢的logo，最好是正方形。打开ps，使用快速选择工具选择白色区域ctrl+x删除…

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

为什么要用精灵图？

比如京东首页的这些icon，如果每个icon都去请求一个资源。是非常浪费资源的。因为我们浏览器在同一个域名下并发加载的资源(CSS、JS 、图片等)数量是有限的。

我们可以将这些icon放到一张图片，通过截取这张图片的不同的区域，拿到不同的icon
在这里插入图片描述

制作一个背景透明的Icon

  1. 截图你喜欢的logo，最好是正方形。
    在这里插入图片描述
  2. 打开ps，使用快速选择工具
    在这里插入图片描述
  3. 选择白色区域ctrl+x删除。调节这个可以改变选择精度。
    在这里插入图片描述
  4. 这样就OK了。
    在这里插入图片描述
  5. img标签引用。设置width，height改变大小，不然图片可能会变形
<img src="@/../public/img/home.png"  style="width:30px;height:30px"/>

制作精灵图

非常好用的精灵图制作网站 自动生成css：https://sprite.ydr.me/

图片大小修改：https://www.sojson.com/image/change.html

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 1


相关推荐

  • pycharm2021.5 激活码[在线序列号]「建议收藏」 idea

    pycharm2021.5 激活码[在线序列号]「建议收藏」

    pycharm2021.5 激活码[在线序列号]，https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧！

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月19日
    88
  • 标准模板库(STL)学习指南之map映射

    标准模板库(STL)学习指南之map映射

    标准模板库(STL)学习指南之map映射

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月13日
    41
  • svn更换服务器地址_如何登录svn服务器

    svn更换服务器地址_如何登录svn服务器

    svn更换服务器地址_如何登录svn服务器描述本文适用于服务器镜像复制的情况，即svn在原本的服务器上，在服务器控制台上，将原本服务器的镜像导入新的服务器中，因此可能并不适用于所有的情况；操作步骤1.将快到期的服务器镜像进行导出，在新的服务器上进入镜像导入，等待完成即可；2.由于是镜像复制，因此原本的svn配置一致，只需要修改分支绑定的服务器域名即可，如下所示：查看迁移后的svn项目绑定的服务器信息将当前项目目录中的.svn目录进行删除（保险起见，可以先进行备份）#进入项目cd/dir…/larave

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月2日
    0
  • 回顾JPS命令_实时打印日志命令

    回顾JPS命令_实时打印日志命令

    回顾JPS命令_实时打印日志命令一概述jps是jdk提供的一个查看当前java进程的小工具，可以看做是JavaVirtualMachineProcessStatusTool的缩写。非常简单实用。命令格式：jps[options][hostid][options]选项：-q：仅输出VM标识符，不包括classname,jarname,argumentsinmainmethod-m：输出mainmethod的参数-l：输出完全…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月15日
    0
  • Java单例模式(Singleton)以及实现「建议收藏」

    Java单例模式(Singleton)以及实现「建议收藏」

    Java单例模式(Singleton)以及实现「建议收藏」一.什么是单例模式因程序需要，有时我们只需要某个类同时保留一个对象，不希望有更多对象，此时，我们则应考虑单例模式的设计。二.单例模式的特点单例模式只能有一个实例。单例类必须创建自己的唯一实例。单例类必须向其他对象提供这一实例。三.单例模式VS静态类在知道了什么是单例模式后，我想你一定会想到静态类，“既然只使用一个对象，为何不干脆使用静态类？”，这里我会将单例模式和静态类进行一个比较。单例可以继承和被继承，方法可以被override，而静态方法不可以。静态方

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月7日
    23
  • Java课程设计【学生信息管理系统】[通俗易懂]

    Java课程设计【学生信息管理系统】[通俗易懂]

    Java课程设计【学生信息管理系统】[通俗易懂]课程设计目录一、问题描述二、基本要求三、需求分析四、概要设计1、类之间的调用关系2、学生信息模块3、管理系统模块4、详细设计①主程序LoginGUI的代码②程序View的代码③程序Student的代码④程序ConnectSQLServer的代码五、调试分析六、用户使用说明1、登录2、添加3、查询4、修改5、删除6、退出七、测试结果八、课程设计总结九、参考文献一、问题描述如何实现一个功能简单的学生信息管理系统，能够对学生信息（包括照片）进行添加、删除、修改和查询等操作。二、基本要求实现一个功能简单的学

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月17日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

评论列表（1条）

  • 匿名的头像
    匿名 2022年10月13日 上午9:18

    大哭难过生气

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