Ưu điểm chính của việc sử dụng hình ảnh sprite là giảm số lượng yêu cầu http, giúp thời gian tải trang web của chúng tôi nhanh hơn.
Sau đây là mã để hiển thị một biểu tượng từ mã hình ảnh bằng cách sử dụng CSS -
Ví dụ
<!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> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
