精灵图

精灵图精灵图什么是精灵图: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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Oracle 创建表空间

    Oracle 创建表空间–删除表空间droptablespacenacosincludingcontentsanddatafiles—-创建表空间并定义路径createtablespacenacos–表空间名datafile’D:/app/Administrator/oradata/nacos/nacos.dbf’size500m–大小初始值autoextendon–自动扩展next50mmaxsize20480m–每次扩展50m,最大为20480mex…

    2022年7月11日
  • spring事务回滚的多种方式「建议收藏」

    spring事务回滚的多种方式「建议收藏」转:https://www.cnblogs.com/zeng1994/p/8257763.htmlstart看下下面的说明,会对理解本人贴出的代码有帮助。1.代码中事务控制的3种方式编程式事务:就是直接在代码里手动开启事务,手动提交,手动回滚。优点就是可以灵活控制,缺点就是太麻烦了,太多重复的代码了。声明式事务:就是使用SpringAop配置事务,这种方式大大的简化了编码。需要注…

    2022年10月19日
  • DatabaseMetaData获取数据库信息 .「建议收藏」

    DatabaseMetaData获取数据库信息 .「建议收藏」importjava.sql.Connection;importjava.sql.DriverManager;importjava.sql.Statement;importjava.sql.DatabaseMetaData;publicclassDataConn{ publicDataConn(){ } publicstaticvoidma

    2022年6月19日
  • hdu 3980 Paint Chain(SG函数)

    hdu 3980 Paint Chain(SG函数)PaintChainProblemDescriptionAekdycoinandabcdxyzkareplayingagame.Theygetacirclechainwithsomebeads.Initiallynoneofthebeadsispainted.Theytaketurnstopaintthechain.InEachtur

    2022年7月23日
  • pip安装scrapy失败_scrapy框架运行

    pip安装scrapy失败_scrapy框架运行错误如图所示,running setup.py install for Twisted…..errorTwisted依赖库安装报错,重新下载手动安装一下下载网址:https://www.lfd.uci.edu/~gohlke/pythonlibs注意:看下安装的python是什么版本,我安装的python 3.9.0,就下载cp39,64位的下载安装的版本不对,就会报:Twisted-20.3.0-cp38-cp38-win_amd64.whl is not a support…

    2022年8月18日
  • DatabaseMetaData,ResultSet,ResultSetMetaData「建议收藏」

    DatabaseMetaData,ResultSet,ResultSetMetaData「建议收藏」DatabaseMetaData,ResultSet,ResultSetMetaData三种类型的区别    出处:http://blog.csdn.net/suwu1501、DatabaseMetaData   有关整个数据库的信息:数据库产品的名称和版本,数据库中表和列等信息,关于数据库的整体综合信息。   接口关系:publicinterfaceDatabaseMetaD…

    2022年6月19日

发表回复

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

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