非零基础自学前端最后一遍一 HTML+CSS 14 额外知识补充 14.6 认识精灵图和获取过程

野性酷女 2024-03-22 15:28 18阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  14 额外知识补充
         *   *  14.6 认识精灵图和获取过程
             *   *  14.6.1 认识精灵图 CSS Sprite

![在这里插入图片描述][96587937462c4795a18c75894481e644.png_pic_center]

#### 一 HTML+CSS ####

#### 14 额外知识补充 ####

##### 14.6 认识精灵图和获取过程 #####

###### 14.6.1 认识精灵图 CSS Sprite ######

*  什么是CSS Sprite
    
     *  是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
     *  有人翻译为：CSS雪碧、CSS精灵
 *  使用CSS Sprite的好处
    
     *  减少网页的http请求数量，加快网页响应速度，减轻服务器压力
     *  减小图片总大小
     *  解决了图片命名的困扰，只需要针对一张集合的图片命名
 *  Sprite图片制作（雪碧图、精灵图）
    
     *  方法1：Photoshop, 设计人员提供
     *  方法2：https://www.toptal.com/developers/css/sprite-generator
        
        ![在这里插入图片描述][c729eeab17544449937b95a6caf79c26.png_pic_center]

[96587937462c4795a18c75894481e644.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/10bbb2dc4c114394981d52a04c20a1fa.png
[c729eeab17544449937b95a6caf79c26.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/dde01394630b42d78cc35d829815c60e.png