扫盲之web前端讲的“切图”到底是什么?

作为一个web前端初学者，对于html5、css3、jquery、w3c、前端、切图、hack、雪碧图等这些关键词一定会比较多见到，其中切图到底是指的什么？很多初学者都会搞错，在网页三剑客那会儿，没有前端的说法，切图是指将psd还原成html的过程，有点类似蹴鞠（切图）和足球（前端）的意思。

以下来自知乎的QA式解答，很通俗

1、什么是切图？

切图就是将 .psd 设计稿还原成 Web 页面的过程，这个过程包括两部分：

• 切出素材

• 编写代码实现

2、为什么要切图？

没有人可以直接把一整张图片引用页面，当作 Web 页面的。切图的主要目的就是给网页提供图片素材 ，可以让你从 html 或者 css 里引入图片。

html: <img src="" alt="">

3、如何切图？

• 使用 PS 工具

• 使用背景图

• 图片合并方案

• 浏览器兼容

4、都需要切哪些图？

• 修饰性，用在 css 里，icon、logo、有特殊效果的按钮和文字

• 内容性，用在 html 里，Banner、广告图片、文章配图

5、切出来的图片保存为哪种格式？

修饰性的保存为 png24（支持半透明），png8。内容性的保存为 jpg。

6、有哪些可以学习的切图教程

建议可以参考一下慕客网和网易云课堂的前端切图部分。

-----

由只教web前端实战的，切图学院（qietu.org）整理。