CSS雪碧图1. 定义2. 使用雪碧图的优点3. 使用雪碧图的原理4. 雪碧图的制作

96 阅读 0 评论 64 点赞

我是靠谱客的博主野性蜗牛，最近开发中收集的这篇文章主要介绍CSS雪碧图1. 定义2. 使用雪碧图的优点3. 使用雪碧图的原理4. 雪碧图的制作，觉得挺不错的，现在分享给大家，希望可以做个参考。

1. 定义

CSS sprite也叫做CSS 雪精灵，CSS 雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星小图都包含到一张大图中去。

① 减少图片的字节。

② 客户端每显示一张图片都会向服务器发送请求，所以图片越多，造成的延迟越大。使用雪碧图访问页面时，由从前的多次请求转换为一次请求，减少了网页的HTTP请求，从而大大提高了页面的性能。

③ 减轻了对图片命名的困扰，提高了网页的制作效率。

① 设置一个有宽高的容器（因为雪碧图需要使用背景图片，但是背景图片不能自动撑开容器，所以需要手动设置容器大小）

② 通过background-image引入雪碧图作为背景图片。

③ 通过background-position把背景图片移动到需要的位置。

① 安装Photoshop

② 下载Cutterman插件

③ 打开图片，点击移动工具，设置自动选择为图层，选中需要的图层（按CTRL多选）

④ 图层选择完毕，点击窗口，选择扩展功能，选择Cutterman

⑤ 勾选合并导出选中的图层，根据需求选择iOS、Android和Web，选择输出路径导出

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。