CSS Sprites(CSS图片精灵、雪碧图)看这里就够了

CSS Sprites是什么

CSS Sprites是一种网页图片应用处理方式。
又被解释为：

CSS精灵
CSS图像拼合
CSS贴图定位
CSS图片精灵
CSS雪碧图
图片合成技术

CSS Sprites的原理

就是把一个页面涉及到的所有零星图片（适合小的导航图标icon图片、按钮图标icon图片；不适合大的页面背景图片）等有规则的合并成一张大图中，即将多个图片融合到一张整图里面。
在需要用到图片的时候，通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

CSS Sprites的优势

通过图片整合来减少对服务器的http请求次数，从而提高页面的加载速度，提高了页面性能。
通过整合图片来减小图片的数量和体积。
解决图片命名上的困扰。
更换页面风格比较方便（更换不同颜色/形状的icon整图）。

CSS Sprites的缺点

在开发时你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置。
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，你需要考虑当前盒子会不会漏出其他的背景图，要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现背景出现拼合相邻图片，干扰图片的情况。
维护比较麻烦，如果页面背景有少许改动（更换某个图标），一般就要改这张合并的图片。无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，最好在图片上增加图片不要删除原来的图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且需要重新计算图片的位置。所以一旦需要更改背景图的话，轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

CSS Sprites图片整合原则

边切图边整合，定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。
将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
单张整合好的sprite图片在100KB以内。
按分类整合图片。
为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。

CSS Sprites使用教程举例：

几个按钮icon（宽高均为20px）整后的大图，如下图所示
HTML页面

<div class="sprites"><div><span class="sprites1"></span>付款图标</div><div><span class="sprites2"></span>存款图标</div><div><span class="sprites3"></span>删除图标</div><div><span class="sprites4"></span>粘贴图标</div><div><span class="sprites5"></span>笑脸图标</div>
</div>

CSS样式

 .sprites{width: 200px;margin: 50px auto;}.sprites div{margin: 5px;}.sprites span{float: left;width: 20px; height:20px;background: url('./images/icon.png');/* 引用精灵图 */background-size: 60px 40px;}.sprites1{background-position: 0 0;}.sprites2{/* 使用background-position定位图标的准确位置 */background-position: -20px 0 !important;}.sprites3{background-position: 0 -20px !important;}.sprites4{background-position: -20px -20px !important;}.sprites5{background-position: -40px 0 !important;}

显示结果，如下图所示

声明：案例图片来源于网络，仅限本人学习理解CSS Sprites，未做其他商业用途。

CSS Sprites(CSS图片精灵、雪碧图)看这里就够了相关推荐

CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
前端工程师实战17：详解CSS背景图片、雪碧图
大家好,全套HTML和CSS入门与实战课程正在我的专栏<HTML与CSS入门与进阶>更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅! ...
【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
CSS中如何快速生成雪碧图
最近遇到了导入雪碧图的项目,因为雪碧图更加好写,然后发现了一款比较好用的可以在线生成雪碧图的网页: https://www.toptal.com/developers/css/sprite-gener ...
浏览器常用的图片优化雪碧图/实体字符/svg
雪碧图唯一的优点是减少请求数,HTTP/1.1下浏览器同时加载资源的数量是一定的,IE6个,chrome 6个,firefox 8个,而HTTP2 下是没有数量限制的雪碧图的制作方法:node 的一 ...
CSS Spritec下载,精灵图，雪碧图，初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

CSS Sprites(CSS图片精灵、雪碧图)看这里就够了

CSS Sprites是什么

CSS Sprites的原理

CSS Sprites的优势

CSS Sprites的缺点

CSS Sprites图片整合原则

CSS Sprites使用教程举例：

CSS Sprites(CSS图片精灵、雪碧图)看这里就够了相关推荐

最新文章

热门文章