基础学习8 pc端项目规划

精灵图技术
优：
1，减少请求次数,提高界面加载的速度；
2，图片命名上的困扰；
3，更换风格方便。
缺：
1，必须限定容器大小符合背景图元素位置，需要计算。

图片拼合技术,它就是把多张小图拼合成一张大图 ,利用背景定位属
性background-position:xpx ypx 实现显示大图当中的某一个小图
how?
(1)确定显示小图片的那个盒子的宽高
(2)以背景的方式插入精灵图 background-image:url();
(3)移动图片的定位位置background-position:xpx ypx ,向上移动
以及向左移动 位置值肯定是负值 0 0
课堂练习
PS 工具
掌握
.psd 源文件 这个文件由多个图层构成 图层就是拥有背景透明的图
片 一般程序员自己用
.png,.jpeg 成品 一般给客户用 不能修改
工具:
移动工具: 移动图层
油漆桶:填充颜色
选区工具: 选择图层某一部分
新建图层: 面板区点击 鼠标双击图层文字改图层名字
变形工具 :
ctrl+T 快捷键 旋转 缩放 按enter键完成操作
图层:
编组: ctrL+G group
取消编组: ctrl+shift+g
向上移动图层 ctrl+]
向下移动图层 ctrl+[
图层置顶 ctrl+shift+]
图层置底 ctrl+shift+[
图层合并 ctrl+e
前景色 alt+ delete
背景色 ctrl+delete
撤销上一步 ctrl+z
撤销上几步 ctrl+alt+z
切图

网页常见图片格式及特点

格式	优点	缺点	使用场景
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量明显下降	色彩丰富的图片/渐变图像
gif	文件小，支持动画、透明，无兼容性问题	只支持256种颜色	色彩简单的 logo/ icon/ 动图
png	无损压缩，支持透明，简单，图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo / icon /透明图
webp	文件小，支持有损和无损压缩，支持动画透明	浏览器兼容性不好	支持webp格式的app和webview