大家好，又见面了，我是你们的朋友全栈君。
为什么要用精灵图？
比如京东首页的这些icon，如果每个icon都去请求一个资源。是非常浪费资源的。因为我们浏览器在同一个域名下并发加载的资源(CSS、JS 、图片等)数量是有限的。
我们可以将这些icon放到一张图片，通过截取这张图片的不同的区域，拿到不同的icon
制作一个背景透明的Icon
- 截图你喜欢的logo，最好是正方形。
- 打开ps，使用快速选择工具
- 选择白色区域ctrl+x删除。调节这个可以改变选择精度。
- 这样就OK了。
- 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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/136516.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
评论列表（1条）