您的位置：制图网首页 -> 新闻动态 -> 切图怎么切【切图片快捷键】

热门排行

切图怎么切【切图片快捷键】

2023/2/1 来自于：制图网 点击：75

学前端少不了页面布局美化，头条官网做的这么好看，审美布局，需要我们一步步来学习。今天先简单介绍下ps和雪碧图优化。以后还有负载均衡，分担服务器，防止访问量过多而出现网页卡顿宕机。

前端切图入门：

切图 码代码用Photoshop会产生大量缓存先改变缓存盘路径，默认单位的修改px

ps预设：

工具，标尺，图层，信息，字符

用标尺可以更好的裁剪图片，1像素之间也不行

切片工具可以实现快速生成多个图片，但不是很适合

切好图片生成png图片格式，取名要有意义

吸取颜色获取rgb

切图怎么切【切图片快捷键】

CSS雪碧

即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

该图片使用CSS background和background-position属性渲染

切图怎么切【切图片快捷键】

优点：1.减少加载网页图片时对服务器的请求次数2.可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片3.提高页面的加载速度

不足：CSS雪碧的最大问题是内存使用除非这个雪碧图片是被非常小心的组织，你就会最终使用大量的无用的空白。影响浏览器的缩放功能，浏览器就需要做一些额外的工作来纠正这些图片边缘的行为

切图的优化3s时间，网页加载3s还不出来用户基本上会关闭，所以图片数量要适度

颜色代替图片雪碧图的制作字体图标的使用

快捷键的使用：删除图层deletectrl e合并图层v移动c裁切

切图辅助工具：MarkDownTinyPNG前端自动化

切图怎么切【切图片快捷键】

制图网(www.makepic.net)，专业的logo免费设计在线生成网站，全自动智能化logo设计，商标设计，logo在线生成！

欢迎使用制图网制作属于您公司自己的logo，不仅专业而且经济实惠，全方位满足您公司品牌化、视觉化的需求。

输入激活码：

只需简单一步,使用微信扫码(或长按识别二维码)并在任一小程序首页根据提示获取激活码！ chatGPT中文网页版，无需注册，快来体验全网最火爆的人工智能应用!
刻字印章刻章子定刻光敏盖章印订制(淘宝商家)

输入激活码：

只需简单一步,使用微信扫码(或长按识别二维码)并在任一小程序首页根据提示获取激活码！ chatGPT中文网页版，无需注册，快来体验全网最火爆的人工智能应用!
刻字印章刻章子定刻光敏盖章印订制(淘宝商家)