Sprite 从PS切图到具体实现完整过程
来源:互联网 发布:嘉兴行知小学鈞儒小学 编辑:程序博客网 时间:2024/06/07 23:20
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
- Sprite 从PS切图到具体实现完整过程
- PS制作一寸照片具体过程
- _wait_event 具体实现过程
- _wait_event 具体实现过程
- _wait_event 具体实现过程
- _wait_event 具体实现过程
- _wait_event 具体实现过程
- _wait_event 具体实现过程
- 完整轮播图实现过程
- fd_set的具体实现过程
- fastText具体代码实现过程
- 对象池完整实现过程
- 一个完整的壁纸应用——[仿爱壁纸],从设计到实现的过程
- 一个完整的壁纸应用——[仿爱壁纸],从设计到实现的过程
- sql语句实现的具体过程
- Sprite 3D用法和相关特性详解(包括如何从零到一个完整工程)
- Sprite 3D用法和相关特性详解(包括如何从零到一个完整工程)
- DHTML实现 sprite
- iOS开发 如何在Label中显示图片-图文混排
- Android动态调试--jeb调试apk
- PyQt5学习笔记03----Qt Designer生成源码
- 20171010
- 微信小程序input框内容被发出后清空
- Sprite 从PS切图到具体实现完整过程
- C语言实现单链表(带头结点)的基本操作(创建,头插法,尾插法,删除结点,打印链表)
- Markdown的常用语法
- oracle默认用户权限
- LeedCode Container With Most Water
- redhat7升级自带的firefox浏览器并安装flash_player插件
- 深度学习深理解(七)-改善深度神经网络-第三周
- 彻底的卸载干净oracle 11g
- tarjan算法理解