非零基础自学前端最后一遍一 HTML+CSS 14 额外知识补充 14.7 精灵图的使用过程

忘是亡心i 2024-03-22 15:28 25阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  14 额外知识补充
         *   *  14.7 精灵图的使用过程
             *   *  14.7.1 精灵图的使用

![在这里插入图片描述][345c0693339c460a9f02ccba8b477e8c.png_pic_center]

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

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

##### 14.7 精灵图的使用过程 #####

###### 14.7.1 精灵图的使用 ######

*  精灵图如何使用呢?
    
     *  精灵图的原理是通过只显示图片的很小一部分来展示的;
     *  通常使用背景:
        
        1.  设置对应元素的宽度和高度
        2.  设置精灵图作为背景图片
        3.  调整背景图片的位置来展示
 *  如何获取精灵图的位置
    
    http://www.spritecow.com/
    
    ![在这里插入图片描述][0a2bfca2842044378b96801763f8fd71.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
         
          background: #333;
        }
    
        .topbar {
         
          background-image: url(../images/topbar_sprite.png);
          background-repeat: no-repeat;
          display: inline-block;
        }
    
        i.hot-icon {
         
          background-position: -192px 0;
          width: 26px;
          height: 13px;
        }
    
        i.logo-icon {
         
          background-position: 0 -19px;
          width: 157px;
          height: 33px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        <i class="topbar hot-icon"></i>
        <i class="topbar logo-icon"></i>
        
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][49d288e0f8fd475eaf291d37b1df137f.png_pic_center]

[345c0693339c460a9f02ccba8b477e8c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/197054fd03c84c18bb27963a09f69d72.png
[0a2bfca2842044378b96801763f8fd71.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/96a598af073d409f9cf38c2f7fb3535a.png
[49d288e0f8fd475eaf291d37b1df137f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e82d99cd769c49ddae833415ffb3056c.png