CSS Sprite (精灵图/雪碧图)

CSS Sprite

• 目录
• • 应用场景
  • • 1.网页性能优化
    • 2.用户交互场景
  • 代码实现
  • • 1.目录结构
    • 2.练习图片地址
    • 3.代码

目录

应用场景

1.网页性能优化

• 减少 HTTP 请求：在传统的网页中，如果有多个小图标或小图片，浏览器需要为每个图片单独发起一个 HTTP 请求。这会增加服务器的负载和页面的加载时间。使用 CSS 精灵图可以将这些小图片合并成一张大图，浏览器只需要发起一个 HTTP 请求来获取这张大图，从而显著减少了请求数量，加快了页面的加载速度
• 节省带宽：精灵图在合并小图片时，可以对图片进行优化处理，减少图片的总体大小

2.用户交互场景

• 实现图标切换效果：通过改变 CSS 的 background-position 属性，可以轻松实现图标的切换效果
• 创建动画效果：结合 CSS 的 animation 属性和精灵图，可以创建简单的动画效果。通过不断改变 background-position 属性，让精灵图中的不同部分依次显示，从而形成动画效果

代码实现

1.目录结构

2.练习图片地址

emoji图片地址

3.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        .container{
            width: 80px;
            height: 80px;
            outline: 1px solid #ccc;
            background: url(./img/emoji.jpg) no-repeat -130px -120px;
            /* background-position:-130px -120px; 合入background*/
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

4.效果