专栏首页前端菜鸟变老鸟Sprite 从PS切图到具体实现完整过程

Sprite 从PS切图到具体实现完整过程

CSS雪碧图(sprite)是一种网页图片非常高效的处理方式,它是将页面中包含的零星图片利用PS制作到一张大图中,再结合background-position属性进行定位的的方式实现。 它的优点有以下方面: 1.      减少http请求次数。 2.      减少图片字节数(很多人有疑问为什么合在一起还会降低字节数,图片明明变大了。原因是这样的:每个图片都是有固定的格式的,包括图像头、版本号、appo块等等,这些属性都会占一定的字节数。因此合在一起回降低字节数)。 缺点:维护成本增加,比如要修改或增加一个图标需要修改整张sprite图。 解决这一缺点的方法是:增加图标摆放的间隙。根据图片大小一般留20-40px的间隙。 图片合并的基本原则: 1.     色彩相近的合在一起 2.     大小相近的合在一起 3.     属于同一页面的合在一起 4.     有点击或hover状态改变的图标放在一起 具体实现: 一、PS切图: 首先合并图层,然后使用举行选框工具选出需要切出的图标,接着使用魔棒工具+Alt去除多余的部分。最后保存到新建的图层。我这里使用的是Adobe公司的部分软件logo得到的结果如下:

二、CSS布局: HTML:使用ul_li标签布局

CSS:加上一些CSS属性之后

CSS before选择器:在被选元素的内容前面插入内容。 使用before选择器,为每个li标签加上background-position属性之后:

详细解读:以PS为例。 .ps:before{ background-position:-45px-21px; } 其中background-position的第一个值表示PS图标左边距离整张sprite图左边的距离,第二个值表示PS图标上边距离整张sprite图上边的距离。直接上图:

但是我们看见实际运用的时候的值是负数,这就相当于把整张sprite往左边移动45px,往上移动21px。这些值可以用PS直接测量出来。 最后附上demo源码下载地址:https://github.com/usecodelee/sprite

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • sublime VI编辑器 十分钟熟练掌握各种命令

    大家都知道,写代码的时候总有许多繁琐的操作,换行、删除一行、复制一行、去到行首、行尾等等。通常情况下是使用鼠标直接点击,这会大大的降低我们的开发效率,因此大家想...

    从入门到进错门
  • Present 轻量级加密算法 C#实现

    从入门到进错门
  • WEB性能--TCP

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    从入门到进错门
  • 反向传播算法推导-卷积神经网络

    原创声明:本文为 SIGAI 原创文章,仅供个人学习使用,未经允许,不能用于商业目的。

    SIGAI学习与实践平台
  • 人脸识别算法系列文章之facenet讲解

    人脸识别所面临的一个挑战就是你需要解决一次学习问题,这意味着在大多数人脸识别应用中,你需要通过单单一张图片或者单单一个人脸样例就能去识别这个人。

    算法发
  • CVPR2020 中科院+商汤出品 Small Big Net

    为了解决该问题,我们提出了一种SmallBig网络,它分为small biew和big view两个分支

    BBuf
  • GoogLeNet论文阅读

    在2014年的ImageNet图像识别挑战赛中,一个名叫GoogLeNet的网络结构大放异彩。它虽然在名字上向LeNet致敬,但在网络结构上已经很难看到LeNe...

    mathor
  • 基于web页面开发串口程序界面---UI模板

    复习一下,当点击读取后,根据后台返回的信息中的有效传感器数量(在此为9),动态生成9个tab标签页。每个传感器的进一步操作在各自的标签页中。

    MiaoGIS
  • 基于Excel2013的文本函数

    CONCATENATE函数既能引用一个区域直接合并,又不会漏掉数值、日期和公式结果,还能引用多个区域,比&符号更好用。

    潇洒坤
  • Linux的常用指令

    在CentOs下useradd与adduser是没有区别的都是在创建用户,在home下自动创建目录,没有设置密码,需要使用passwd命令修改密码。

    大学里的混子

扫码关注云+社区

领取腾讯云代金券