CSS Image Sprite เป็นไฟล์รูปภาพรวมของรูปภาพทั้งหมดในหน้าเอกสาร Image sprytes มีประโยชน์เพราะทรัพยากรรูปภาพจะต้องโหลดเพียงครั้งเดียว โดยใช้ CSS background-position ส่วนต่างๆ ของรูปภาพรวมสามารถแสดงได้
ลองดูตัวอย่างสำหรับ CSS Image Sprites:
ตัวอย่าง
<!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>
ผลลัพธ์
