CSS Sprite
目录
应用场景
1.网页性能优化
减少 HTTP 请求：在传统的网页中，如果有多个小图标或小图片，浏览器需要为每个图片单独发起一个 HTTP 请求。这会增加服务器的负载和页面的加载时间。使用 CSS 精灵图可以将这些小图片合并成一张大图，浏览器只需要发起一个 HTTP 请求来获取这张大图，从而显著减少了请求数量，加快了页面的加载速度节省带宽：精灵图在合并小图片时，可以对图片进行优化处理，减少图片的总体大小
2.用户交互场景
实现图标切换效果：通过改变 CSS 的 background-position 属性，可以轻松实现图标的切换效果创建动画效果：结合 CSS 的 animation 属性和精灵图，可以创建简单的动画效果。通过不断改变 background-position 属性，让精灵图中的不同部分依次显示，从而形成动画效果
代码实现
1.目录结构
2.练习图片地址
3.代码
html
<!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.效果
