首页 > WEB开发 > web前端切图是什么意思?
2021
09-17

web前端切图是什么意思?

不了解web前端开发的小伙伴们,经常看到web前端开发中经常提到的“切图”,这到底是一个什么概念呢?


1、什么是切图?

切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面,通俗来讲,把一张设计图 利用到切片工具 把自己所需的切成一张张小图,然后用DIV+CSS完成静态页面书写,完成CSS布局。

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


1.切出素材

2.编写代码实现

2、为什么要切图?

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

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

css:background-img: url(../images/sprite.png)


3、如何切图?

1.使用 PS 工具

2.使用背景图

3.图片合并方案

4.浏览器兼容


4、都需要切哪些图?

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

2.内容性,用在 html 里,Banner、广告图片、文章配图


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

修饰性的保存为png24(支持半透明),png8。内容性的保存为jpg。


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

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


7、为什么要切图,而不是整张图都放到html去呢?

1,一次性加载一张大图,会比较慢,效果就是进去后看到一张图一点点加载。

2,切图后,一些横向和竖向的重复性图案,只需要一个像素宽的源图就行,节省不少资源。如知乎头部和网易云音乐头部导航条,整个背景可以之用一个像素宽的竖条,然后css控制横向铺开就可以了,这里要用一个像素宽的竖条,而非用一个像素点切图是因为,有轻微纵向渐变。

3,对于一些设计稿中的元素,甚至不需要源图,只需要取色,全部铺开就好了,那就更省了,如网易头部。

以上就是“web前端切图是什么意思?”的详细内容,想要了解更多web前端内容欢迎持续关注编程学习网

扫码芷若 获取免费视频学习资料

编程学习

查 看2019高级编程视频教程免费获取