网页精灵——CSS sprite全方位认知和攻略

Posted 2021-04-09 嗨码歌

15

CSS sprite

又被称作css精灵

其实

就是一种网页图片应用处理方式

怎么使用呢

往下看

↓↓↓

（一）雪碧图简介

（二）雪碧图使用

（三）雪碧图制作

文字版：

1、什么是CSS Sprite

CSS sprite在国内很多人叫css精灵，是一种网页图片应用处理方式。

（示例图片）

2、CSS Sprite原理

其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image、background-repeat、background-position属性，对这张大图进行定位。background-position可以用数字能精确的定位出背景图片的位置。

3、如何使用

1）用ps或者dw把需要的图片切下来

2）打开CssSprite.exe（提示：根据文末提示获取工具）

3）打开图片

点击左上角按钮打开图片

4）排布图片

可以选择上面的最上面按钮今天横竖的默认排布，也可以鼠标选中图片拖动位置，拖动完成后程序会根据内部图片的位置生成面积最小的雪碧图，当然也会改变相应的图片位置。

5）代码生成

在程序中可以生成sass代码，以及css代码，看自己需要嘛，自己选择，选中“是否是手机端”的时候会把所有的尺寸除以2，因为手机端往往会设计图比较大，所以要缩放，建议生成图片后再复制生成的代码。

6）保存雪碧图

4、CSS Sprites优点

CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

关注后回复“sprite”获取全部视频内容和文档，另外还有文章中提到的工具。