前端技巧之如何切图

  1. 云栖社区>
  2. 博客>
  3. 正文

前端技巧之如何切图

激酶 2016-01-08 08:52:09 浏览6173
展开阅读全文

注:本篇文章基于HTML5/CSS3,较少考虑浏览器兼容性(兼容性查询可以见caniuse.com网站),需要读者注意。

前端开发≠切图,但前端开发需要会切图,切图是衔接PSD与HTML静态页面的桥梁。作为需要涉猎前端的后端工程师,在切图中需要掌握如下的知识:

如何评价切图切的好

切图质量的好坏评价可以从如下几个方面来判断:

  1. 业务角度:制作完的HTML网页还原度高,甚至做到像素级还原;
  2. 技术角度:图片体积小(减少网络传输)、图片数量少(减少请求数量);
  3. 配合角度:便于后续制作HTML,特别是制作自适应屏幕的网页。

要不要切

一般来说,图片总是比字符形式的HTML/CSS体积大,因此总体原则是能用HTML/CSS实现的就不切图。常见的比如:

  1. 纯色背景色:用CSS2的background-color来实现;
  2. 渐变背景色:用background-image

网友评论

登录后评论
0/500
评论
激酶
+ 关注