美文网首页
前端必备技能之如何制作精灵图

前端必备技能之如何制作精灵图

作者: pppercywang | 来源:发表于2019-07-28 22:21 被阅读0次

为什么要用精灵图?

比如京东首页的这些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"/>

相关文章

网友评论

      本文标题:前端必备技能之如何制作精灵图

      本文链接:https://www.haomeiwen.com/subject/qtjmrctx.html