文章目录

• 一、photoshop中切片工具的使用方法【切图】
• 二、什么是雪碧图（CSS Sprites图片切割术）
• • 优点
  • 缺点
  • 使用 background属性
• 三、如何在psd上切图

一、photoshop中切片工具的使用方法【切图】

在前端编写页面时，部分小图标会使用ps中的切片工具将UI给的小图标组合在一起的大图片进行分割，小编今天将切片工具的使用方法分享给大家。

1.首先找一张图标很多的大图片，将图片放置画布中。

3.从最上方开始画出区域，将图片裁切为需要的部分，可以看到上方显示的裁切数字。

二、什么是雪碧图（CSS Sprites图片切割术）

1.精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。
2.常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。

优点

1.体积小：把N多个小图标放到一张大图上去，通过整合图片来减少图片的体积。
2.请求次数少，打开速度更快：通过图片整合减少用户对服务器的请求次数，从而提高 站的优化速度。

缺点

1.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
2.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

使用 background属性

补充background相关属性
background-color: red (等于 background:red)
background-image: url() 填充背景图片
background-repeat: no-repeat(不平铺)
background-position：0 0；属性设置背景图像的起始位置。
CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦。

三、如何在psd上切图

1.打开你的Photoshop，首先将你的psd文件引入，可以点击文件选择打开或者直接拖动你的psd文件到Photoshop界面。

3.修改合适的地址，以及文件名前缀和文件的类型，然后直接运行即可。