使用 CSS 从图像雪碧图显示图标

cssweb developmentfront end technology更新于 2025/12/10 14:36:17

使用图像雪碧图的主要优势在于减少 http 请求数量，从而加快网站加载速度。

以下是使用 CSS 从图像雪碧图显示图标的代码 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>