Ư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. Hình ảnh cũng tải nhanh hơn giúp việc chuyển đổi từ hình ảnh này sang hình ảnh khác trong một số sự kiện mượt mà hơn nhiều. Image Sprite là một tập hợp các hình ảnh được đặt thành một hình ảnh duy nhất.
Sau đây là đoạn mã hiển thị lợi thế của sprite 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 -
Ở trên, chúng tôi đã đặt sprite hình ảnh bằng cách sử dụng sau -
.twitter,.facebook {
background: url(sprites_64.png) no-repeat;
display:inline-block;
width: 64px;
height: 64px;
margin:10px 4px;
}
.facebook {
background-position: 0 -148px;
}