精灵图

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


相关推荐

  • 在北京的那三年——实习

    在北京的那三年——实习

    2022年1月19日
    54
  • python的进制转换器,Python进制转换[通俗易懂]

    python的进制转换器,Python进制转换[通俗易懂]进制转换:进制转换是人们利用符号来计数的方法。进制转换由一组数码符号和两个基本因素“基数”与“位权”构成。基数是指,进位计数制中所采用的数码(数制中用来表示“量”的符号)的个数。位权是指,进位制中每一固定位置对应的单位值。简单转换理念:把二进制三位一组分开就是八进制,四位一组就是十六进制二进制与十进制:(1)二进制转十进制:“按权展开求和”(1011)2=1×2**3+0x2**2+1x…

    2022年5月19日
    35
  • mybatais的时间筛选「建议收藏」

    mybatais的时间筛选「建议收藏」mybatais的时间筛选

    2022年4月23日
    45
  • 局域网内实现不同网段ip通信_局域网不同网段互访

    局域网内实现不同网段ip通信_局域网不同网段互访1.使用场景电脑使用网段ip为172.23.0.0/16,设备ip为192.168.1.0/24。将电脑和设备通过交换机连接起来,满足了电脑和设备处于同一局域网不同网段,不能进行网络通信。为了能够进行通信,比如,进行设备的密码重置等,都需要能够通信才能完成。2.参考方案可以在电脑的网络设置里的高级配置中,添加一个和设备处于同一网段的ip。需要注意的是,添加的ip之前要先使用ping命令判断局域网中是否存在相同ip的设备,为了避免ip冲突。有时你会发现ping不通的ip,添加之后也有不通的情况。这

    2022年9月12日
    0
  • Java学习之Mybatis框架入门篇

    Java学习之Mybatis框架入门篇0x00前言前面文章使用jdbc进行数据库的连接,虽然代码并不复杂,但是比较繁琐。在连接池的文章里面也使用到了JDBCTemplate简化了数据库操作的步

    2021年12月12日
    44
  • maven打包时跳过测试「建议收藏」

    maven打包时跳过测试「建议收藏」开发记录有一个maven项目,我clone一下最新的代码。准备打包(mavenpackage),没想到在执行到TEST阶段报错。百思不得其解,决定跳过测试去打包,然后部署。Failedtoexecutegoalorg.apache.maven.plugins:maven-surefire-plugin:2.12.4:test在运行mvninstall或mvnpackag…

    2022年6月9日
    30

发表回复

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

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