CSS-精灵图

精灵图
CSS
发布日期:   2020-08-20
更新日期:   2021-11-24
文章字数:   224
阅读时长:   1 分
阅读次数:  

CSS-精灵图🧚‍♀️

什么是精灵图

CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合并为一张整图，然后再利用background-position进行背景图定位的一种技术。

目的

精灵图主要目的是为了减小服务器开销，本来需要请求几次的图片，只需要请求一次就可以了

适用的场景

适用于小图标、并不需要经常更新的图片

彩蛋

源码

文章作者: 木叶勇
文章链接: https://github.com/muyeyong/muyeyong.github.io/2020/08/20/css-jing-ling-tu/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 木叶勇 !
精灵图
赏
  目录