home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

ข้อดีของการใช้ CSS Image Sprite

ข้อดีหลักของการใช้ Image Sprite คือการลดจำนวน HTTP Requests ทำให้เว็บโหลดเร็วขึ้น รูปภาพโหลดเร็วขึ้น ทำให้การสลับภาพเมื่อมี Event เกิดขึ้นลื่นไหลมากขึ้น Image Sprite คือชุดรูปภาพที่รวมอยู่ในไฟล์ภาพเดียว

นี่คือโค้ดตัวอย่างการแสดงข้อดีของ Image Sprite โดยใช้ 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>

ผลลัพธ์

โค้ดด้านบนจะแสดงผลดังนี้ −

ข้อดีของการใช้ CSS Image Sprite

ด้านบน เราตั้งค่า Image Sprite โดยใช้ −

.twitter,.facebook {    background: url(sprites_64.png) no-repeat;    display:inline-block;    width: 64px;    height: 64px;    margin:10px 4px; } .facebook {    background-position: 0 -148px; }