IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      CSS精灵图有什么作用?怎样添加精灵图

      • 发布时间:
        2023-05-18
      • 版权所有:
        云和教育
      • 分享:

      CSS 精灵,也叫 CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再用background-position 精确的定位出背景图片的位置。

      精灵图的作用是减少服务器被请求次数,减轻服务器的压力,提高页面加载速度。
      精灵图提高页面加载速率

      实现步骤:

      1. 创建盒子,盒子尺寸与小图尺寸相同

      2. 设置盒子背景图为精灵图

      3. 添加 background-position 属性,改变背景图位置,使用 PxCook 测量小图片左上角坐标,取负数坐标为 background-position 属性值(向左上移动图片位置)。

      案例:京东服务

      下面我们以京东服务的图标为例。

      1683183593944_京东服务.png
      添加上图中的精灵图,需要的代码如下:

      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
      
        li {
          list-style: none;
        }
      
        .service {
          margin: 100px auto;
          width: 1190px;
          height: 42px;
          /* background-color: pink; */
        }
      
        .service ul {
          display: flex;
        }
      
        .service li {
          display: flex;
          padding-left: 40px;
          width: 297px;
          height: 42px;
          /* background-color: skyblue; */
        }
      
        .service li h5 {
          margin-right: 10px;
          width: 36px;
          height: 42px;
          /* background-color: pink; */
          background: url(./images/sprite.png) 0 -192px;
        }
      
        .service li:nth-child(2) h5 {
          background-position: -41px -192px;
        }
      
        .service li:nth-child(3) h5 {
          background-position: -82px -192px;
        }
      
        .service li:nth-child(4) h5 {
          background-position: -123px -192px;
        }
      
        .service li p {
          font-size: 18px;
          color: #444;
          font-weight: 700;
          line-height: 42px;
        }
      </style>