Web前端养成记—记录与总结(切图篇)
切图之前的思路分析
拿PSD效果图后，首先应该对这张效果图进行分析，在切图层面上，主要分析三点
-
哪些图片是单独的，比如
Logo和banner部分 -
哪些图片是需要平铺的，比如导航部分的背景
-
哪些图片是需要
CSS sprite比如一些列表前面的icon小图标
图片的格式
-
logo统一切成png透明度的（颜色较少的都用png）
-
看透明度情况使用png8或png24
-
一般情况下
临时图、ad、banner图用jpg格式，色彩丰富的、大图切成jpg -
颜色较少的都用png，用png8还是png24需看图片具体透明底情况，半透明的切成png24
-
在保证图片的画质情况下，图片的大小越小越好
-
尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的
（注：IE6不支持PNG24透明度图片，需做兼容处理或切成PNG8）
【png-8和png-24的区别】
-
png8有1位的布尔透明通道（要么完全透明，要么完全不透明），png24则有8位（256阶）的布尔透明通道（所谓半透明）
-
png-8 和gif有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。
（注：我们通常说的“IE6不支持 PNG 透明”，是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明，就像支持gif的透明一样）
切图的一些小技巧
-
Ctrl+N新建一个透明背景图层（大小识图层比例而定，比裁剪的图层大就行） -
shift+鼠标左键点击图层可选中多个图层进行操作 -
Ctrl+鼠标左键选中需要裁剪的图层移至第1步中新建好的透明背景图层当中，再按ctrl+shift+E进行合并可视图层。 -
Ctrl+鼠标左键点击右边图层栏的选区视图，选中需要裁剪的图层选区，再按快捷键[Alt+I+R（裁切）或Alt+I+P（裁剪）]进行裁剪 -
裁剪完成后
ctrl+shift+alt+s进行保存为web可用格式。
CSS Sprite 图
CSS Sprite图：它是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置，因此也叫“图片拼合”技术。
CSS Sprite 图实现的方式
-
PS手动拼图
-
使用Sprite 工具自动生成
-
CSS Sprite自动生成的工具——CssGaga
使用CSS Sprite 图需要满足以下条件：
-
静态图片，不随用户信息的变化而变化
-
小图片，图片容量比较小（一些大图不建议拼成Sprite图）
-
加载量比较大
使用CSS Sprite图好处：
有效的减少http请求数量，加速内容显示，从而提高效率
（注：每请求一次，就会和服务器链接一次，建立链接是需要额外时间的）
CSS Sprite实现的原理
通过控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动
CSS Background-position的计算方式
-
background-position：x定位点 y定位点; -
原点位置，即外层块元素的左上角
-
background-position位置设定是指图片与坐标原点的偏移量 -
原点是不会动的，移动的是图片。X坐标为正，则图片左上角向右平移，为负则图片左上角向左平移
-
Y坐标为正则图片左上角向下平移，为负则左上角向上平移
CSS Background-position 百分比计算方式：
-
X轴：( container宽度 – 图片宽度 )*含符号百分比
-
Y轴：( container高度 – 图片高度)*含符号百分比
Bootstrap框架 的使用手册
使用Bootstrap作为PC页面框架需注意的点：
-
浏览器的兼容性问题（如要照顾IE6/7/8这几个古董）
-
参考Bootstrap框架结构写样式尽量不使用
:before伪元素作为选择器，IE6/7不支持 -
BootStrap 在IE8下无法支持
@media query（媒体查询）做响应式页面设计
问题产生：BootStrap在IE8下无法做响应式设计
解决方案（IE条件注释）：
<!-- 以下两个插件用于在IE9以下（IE6/7/8）版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<!--Bootstrap模版为使IE9以下的（IE6/7/8）浏览器兼容html5新增的标签-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--同理为使IE8浏览器对CSS3的样式（Media queries 媒体查询）进行支持-->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
问题产生：respond.min.js在IE8下失效问题
解决方案：
-
需把文件置于服务器上，如：在
iis下运行 -
包含媒体查询的
css文件需采用外链形式 -
头部引用的
respond.min.js需置于css文件之后 -
头部引用的
respond.min.js文件必须放在本html页内，如shtml文件提出公共部分后则无效
关于我
一个前端爱好者，一个誓死不脱离低级趣味的人，一個庸俗的人，偶尔会装逼。
欢迎各路看官一起深（tan）入（xiao）交（feng）流（sheng）。
联系邮箱： moldy_bread@foxmail.com
特别鸣谢
在这里特别感谢下问津书院的两位领导@校董大人 @院长大人的极力帮助，对本人提出的问题进行耐心解答，并给出了不同的优秀解决方案，在两位大神的带领下涨了好多姿势。
本文PDF下载：Web前端养成记—记录与总结(切图篇)
