2021-12-06 15:37发布
我正好在前两天了解了一下切图，尝试用 Q&A 的形式回答一下。
1、什么是切图？
切图就是将 .psd 设计稿还原成 Web 页面的过程，这个过程包括两部分：
切出素材
编写代码实现
2、为什么要切图？
没有人可以直接把一整张图片引用页面，当作 Web 页面的。切图的主要目的就是给网页提供图片素材，可以让你从 html 或者 css 里引入图片。
html: css: backgroud-img:url(../images/sprite.png)
3、如何切图？
使用 PS 工具
使用背景图
图片合并方案
浏览器兼容
4、都需要切哪些图？
修饰性，用在 css 里，icon、logo、有特殊效果的按钮和文字
内容性，用在 html 里，Banner、广告图片、文章配图
5、切出来的图片保存为哪种格式？
修饰性的保存为 png24（支持半透明），png8。内容性的保存为 jpg。
6、有哪些可以学习的切图教程
建议可以参考一下慕客网和网易云课堂的前端切图部分。
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 四季奶青 的问题《网页切图的目的是什么、一般用什么切图软件?》','http://www.shouhuola.com/answer/37186/141313.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
我正好在前两天了解了一下切图，尝试用 Q&A 的形式回答一下。
1、什么是切图？
切图就是将 .psd 设计稿还原成 Web 页面的过程，这个过程包括两部分：
切出素材
编写代码实现
2、为什么要切图？
没有人可以直接把一整张图片引用页面，当作 Web 页面的。切图的主要目的就是给网页提供图片素材，可以让你从 html 或者 css 里引入图片。
3、如何切图？
使用 PS 工具
使用背景图
图片合并方案
浏览器兼容
4、都需要切哪些图？
修饰性，用在 css 里，icon、logo、有特殊效果的按钮和文字
内容性，用在 html 里，Banner、广告图片、文章配图
5、切出来的图片保存为哪种格式？
修饰性的保存为 png24（支持半透明），png8。内容性的保存为 jpg。
6、有哪些可以学习的切图教程
建议可以参考一下慕客网和网易云课堂的前端切图部分。
一周热门 更多>