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 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

web图像的常见应用策略与技巧

1101
来自专栏IMWeb前端团队

利用canvas实现一个抠图小工具

利用canvas实现一个抠图小工具 0 前言 作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我们做这个事...

4365
来自专栏瞎说开发那些事

使用RPA绘制素描图

2086
来自专栏儿童编程

儿童编程Scratch之“画笔”基础功能学习总结

Scratch中“画笔”功能能够让使用者模拟画笔在舞台上创作,合理运用能够给作品带来极大的趣味性。

3992
来自专栏数据小魔方

Xcelsius(水晶仪表)系列11——选择器高级用法(页面级切换工具)

今天继续跟大家分享关于水晶仪表系列选择器高级用法——页面级切换工具。 之前讲过很多关于菜单选择器的用法, 但是那些基本都是基于单个部件及统计图之间的切换,今天这...

2784
来自专栏Material Design组件

Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

7119
来自专栏非著名程序员

Android自定义View之高仿QQ健康

? 我们都知道自定义View一般有三种直接继承View、继承原有的控件对控件的进行修改、重新拼装组合,最后一种主要针对于ViewGroup。具体的怎么做不是本...

2035
来自专栏极客生活

tableau绘制好看的折线图

1641
来自专栏懒人开发

(1.4)James Stewart Calculus 5th Edition: Graphing Calculators and Computers

在电脑的展现窗口或者屏幕中,矩形部分,我们叫 矩形视图。(不知道这样翻译好不好,反正理解成一个矩形区域就行)

914
来自专栏大数据风控

如何在R中绘制热力地图

一、首先绘画出地图map 地图(map) 按一定的比例运用符号、颜色、文字注记等描绘显示地球表面的自然地理、 行政区域、社会经济状况的图形。 地...

39610

扫码关注云+社区

领取腾讯云代金券