CSS Image Sprite là một tệp hình ảnh kết hợp của tất cả các hình ảnh trong một trang tài liệu. Hình ảnh sprite đi kèm rất hữu ích vì tài nguyên hình ảnh sẽ chỉ phải được tải một lần. Sử dụng nền CSS định vị các phần khác nhau của hình ảnh kết hợp có thể được hiển thị.
Hãy xem một ví dụ cho CSS Image Sprites -
Ví dụ
<!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> Đầu ra
