如何创建和使用 CSS 图像精灵

cssweb developmentfront end technology更新于 2025/1/10 10:20:17

CSS 图像精灵是文档页面中所有图片的组合图像文件。图像精灵非常有用，因为图像资源只需加载一次。使用 CSS background-position 可以显示组合图像的不同部分。

让我们看一个 CSS 图像精灵的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sprite {
   background: url("Capture.png") no-repeat;
   width: 280px;
   height: 200px;
   display: inline-block;
}
.flag1 {
   background-position: 0px 0px;
}
.flag2 {
   background-position: -255px 0px;
}
.flag3 {
   background-position: -510px 0px;
}
.flag4 {
   background-position: -765px 0px;
}
body {
   text-align: center;
}
</style>
</head>
<body>
<div><h1>Flag Image Sprite</h1></div>
<div class="sprite flag1"></div>
<div class="sprite flag2"></div>
<div class="sprite flag3"></div>
<div class="sprite flag4"></div>
</body>
</html>