精灵图

精灵图精灵图什么是精灵图:css精灵(CSSsprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中应用的原因:1.减少对浏览器的请求次数,避免网页的延迟2.方便小图标的统一管理精灵图的制作:1.软件:ps2.制作方法:新建透明图层添加参考线将画布划分,将小图标放入划分好的格子中精灵图的使用:css精灵图需要配…

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

精灵图
什么是精灵图:

css精灵(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中

应用的原因:
1.减少对浏览器的请求次数,避免网页的延迟
2.方便小图标的统一管理

精灵图的制作:
1.软件:ps
2.制作方法:

  • 新建透明图层
  • 添加参考线将画布划分,将小图标放入划分好的格子中

精灵图的使用: css精灵图需要配合背景的图片和背景定位
1.引入精灵图

.basic{ background-image:url(ui.png); width:80px; height:80px; background-repeat:no-repeat; display:inline-block; }

2.精确定位需要显示的小图标坐标

.sprite1{ background-position:80px 0px }

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

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

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


相关推荐

  • 数组和链表的区别浅析

    数组和链表的区别浅析1.链表是什么链表是一种上一个元素的引用指向下一个元素的存储结构,链表通过指针来连接元素与元素;链表是线性表的一种,所谓的线性表包含顺序线性表和链表,顺序线性表是用数组实现的,在内存中有顺序排列,通过改变数组大小实现。而链表不是用顺序实现的,用指针实现,在内存中不连续。意思就是说,链表就是将一系列不连续的内存联系起来,将那种碎片内存进行合理的利用,解决空间的问题。所以,链表允许插入和删…

    2022年6月15日
    36
  • 新秀nginx源代码分析数据结构篇(四)红黑树ngx_rbtree_t

    新秀nginx源代码分析数据结构篇(四)红黑树ngx_rbtree_t

    2022年1月7日
    54
  • ORA-01017: invalid username/password; logon denied Oracle数据库报错解决方案一

    ORA-01017: invalid username/password; logon denied Oracle数据库报错解决方案一ORA-01017:invalidusername/password;logondenied错误(程序中的用户和密码无法登录,登录被拒)。Oracle11g版本初次安装使用报错:解决方法1创建新用户:打开sqlplus以系统身份登录:指令如下sys/managerassysdba;创建新用户:语法:createuser用户名identifiedb…

    2022年5月6日
    146
  • 正则匹配数组全部是数字[通俗易懂]

    正则匹配数组全部是数字[通俗易懂]var value=[“2″,”3”]   varv=value.join(“”);varreg=/^\d+$/g;if(!v.match(reg)){//是否匹配到了数字,未匹配到就不是return;}if(v.match(reg)[0].lengthreturn;}

    2022年6月17日
    63
  • Pycharm代码提示「建议收藏」

    Pycharm代码提示「建议收藏」点击File然后将PowerSaveMode旁边的√去掉就可以了我安装了中文插件,中文就是省电模式,取消勾选就可以实现代码提示

    2022年8月27日
    3
  • 六、小程序|App抓包-移动端抓包app-抓包「建议收藏」

    六、小程序|App抓包-移动端抓包app-抓包「建议收藏」小程序|App抓包移动端抓包app-抓包 ———-IOS设备系统———一、IOS抓包IOS(thor+anubis)app应用市场下载即可:首次安装需要配置证书:抓包:简单测试抓取部分数据包:查看详细数据包内容:点击数据包查看详情:一直摁着,选择重放可进行重放测试thor跳转anubisanubis相关功能点和界面:重放记录:可修改重放:也可进行其他的导出操作:可以将数据包导出联合burp重放———-Android设备系统———二、android移动

    2022年5月27日
    43

发表回复

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

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