Loading

雪碧图

  1. 雪碧图（Sprites）

    • 雪碧图也叫CSS精灵， 是一种CSS图像合成技术，就是将许多小图标合并在一张背景透明的图片上，使用background-position和background-size来控制图片显示的区域。

  2. 为什么要使用雪碧图

    • 网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片， 即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。

  3. 雪碧图的优缺点
    • 优点
      • 通过将多张图片合并成一张，可以有效减少 HTTP 请求，提高页面加载的性能
      • 将多张图片合并到一张图片中，可以减小图片的总大小
      • 整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名
      • 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格
      • 只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率
       
    • 缺点
      • 合成起来麻烦
      • 适应性差
      • 可维护性差
      • 小图标在高清屏幕上可能会失真，另外频繁使用定位会占用比较多的CPU
  4. 具体使用

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;
}

 

posted @ 2019-12-22 23:53  小雪同学  阅读(877)  评论(1)  编辑  收藏  举报