-
雪碧图（Sprites）
- 雪碧图也叫CSS精灵， 是一种CSS图像合成技术，就是将许多小图标合并在一张背景透明的图片上，使用background-position和background-size来控制图片显示的区域。
-
为什么要使用雪碧图
-
网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片， 即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。
-
- 雪碧图的优缺点
- 优点
- 通过将多张图片合并成一张，可以有效减少 HTTP 请求，提高页面加载的性能
- 将多张图片合并到一张图片中，可以减小图片的总大小
- 整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名
- 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格
- 只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率
- 缺点
- 合成起来麻烦
- 适应性差
- 可维护性差
- 小图标在高清屏幕上可能会失真，另外频繁使用定位会占用比较多的CPU
- 具体使用
HTML部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>雪碧图的使用方法</title> 20 </head> 21 <body> 22 <!-- 图片拼合技术 sprite 雪碧图 --> 23 <div class="sprite"></div> 24 </body> 25 </html>
CSS部分
.sprite { /* 1. 定视口 */ width: 180px; height: 180px; border: 1px solid; /* 2. 插图 */ background-image: url("../img/sprite.jpg"); } .sprite:hover { /* 3. 移动位置 */ background-position: -822px -269px; }