关于CSS精灵的图片使用方式

最新推荐文章于 2024-08-09 22:30:35 发布

凌叁儿

最新推荐文章于 2024-08-09 22:30:35 发布

阅读量45

点赞数

分类专栏：前端基础文章标签： css 前端 html

本文链接：https://blog.csdn.net/lingsaner/article/details/131057104

版权

前端基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS精灵是一种网页图片处理方式，通过整合背景图片到一张大图并利用background-position进行定位，从而减少HTTP请求，提高页面加载速度。实现步骤包括创建合适尺寸的盒子，设置背景图及调整background-position。在案例中，京东服务的背景图片就是这样实现的。

摘要由CSDN通过智能技术生成

CSS精灵

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

在这里插入图片描述

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

在这里插入图片描述

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加 background-position 属性，改变背景图位置

3.1 使用 PxCook 测量小图片左上角坐标

3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

案例-京东服务

在这里插入图片描述

HTML结构

<div class="service">
  <ul>
    <li>
      <h5></h5>
      <p>品类齐全，轻松购物</p>
    </li>
    <li>
      <h5></h5>
      <p>多仓直发，极速配送</p>
    </li>
    <li>
      <h5></h5>
      <p>正品行货，精致服务</p>
    </li>
    <li>
      <h5></h5>
      <p>天天低价，畅选无忧</p>
    </li>
  </ul>
</div>