ข้อได้เปรียบหลักของการใช้ภาพสไปรท์คือการลดจำนวนคำขอ 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> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
