“ สไปรต์รูปภาพ ” เป็นเทคนิคในการสร้างภาพขนาดใหญ่หนึ่งภาพที่ประกอบด้วยภาพเดียวหลายภาพ และส่วนใดๆ ของภาพขนาดใหญ่สามารถแสดงได้ตามข้อกำหนดการออกแบบ ช่วยให้นักพัฒนาสามารถสร้างองค์ประกอบที่ดึงดูดสายตาได้อย่างราบรื่น สไปรต์รูปภาพสามารถใช้กับไอคอน ปุ่ม และองค์ประกอบกราฟิกอื่นๆ บทความนี้สาธิตขั้นตอนทีละขั้นตอนของการใช้ภาพสไปรต์ใน CSS
วิธีใช้ I Mage Sprites ใน CSS?
ใน CSS นักพัฒนาใช้สไปรต์รูปภาพเพื่อลด/ลดเวลาในการโหลดหน้าเว็บ ช่วยลดคำขอ HTTP ทำให้โหลดเร็วขึ้น และปรับปรุงปัจจัยด้านประสบการณ์ผู้ใช้ ตัวอย่างเช่น ไปที่ตัวอย่างด้านล่าง:
ตัวอย่าง: การใช้ Image Sprite ในรายการ
ในตัวอย่างนี้ รายการสั่งซื้อจะถูกสร้างขึ้นและในแต่ละรายการ ส่วนหนึ่งของภาพสไปรต์จะแสดงบนหน้าจอ
ข้อกำหนดเบื้องต้น:
ในการรับรูปภาพเฉพาะจากสไปรต์รูปภาพ ขนาดของอิมเมจสไปรต์ที่ใช้มีความสำคัญเป็นพิเศษ เช่น ภาพที่มีขนาด “ 937×156 ” แสดงไว้ด้านล่าง:
ทำตามขั้นตอนด้านล่างเพื่อแสดงบางส่วนของภาพที่แสดงด้านบน:
ขั้นตอนที่ 1: การสร้างรายการ
รายการที่ไม่เรียงลำดับถูกสร้างขึ้นบนหน้าเว็บดังที่เห็นในข้อมูลโค้ดด้านล่าง:
< ยูล >ว่างเปล่า: < ที่ รหัส = 'ว่างเปล่า' > ที่ >
ครึ่ง: < ที่ รหัส = 'ครึ่ง' > ที่ >
เต็ม: < ที่ รหัส = 'เต็ม' > ที่ >
ยูล >
คำอธิบายของข้อมูลโค้ดด้านบน:
-
- ขั้นแรก ให้ใช้ปุ่ม “
- ถัดไป กำหนดรหัสของ “ ว่างเปล่า ”, “ ครึ่ง ' และ ' เต็ม ” สำหรับสามรายการ สิ่งเหล่านี้จะใช้ในภายหลังเพื่อแสดงส่วนหนึ่งของภาพที่ใหญ่ขึ้น
- ขั้นแรก ให้ใช้ปุ่ม “
ขั้นตอนที่ 2: การแสดงภาพแรก
เพื่อแสดงหัวใจว่างบนหน้าเว็บซึ่งเป็นภาพแรกในสไปรต์ภาพ ใช้ ' ว่างเปล่า ” id และใส่รหัสต่อไปนี้:
#ว่างเปล่า {ความกว้าง: 157px;
ความสูง: 150px;
พื้นหลัง: url ( .. / sprite.jpg ) 0 0 ;
}
ในบรรทัดรหัสด้านบน:
-
- ขั้นแรก ให้ตั้งค่า “ ความกว้าง ' และ ' ความสูง ” ของภาพที่ผู้พัฒนาต้องการให้แสดงบนหน้าเว็บ
- คุณสมบัติเหล่านี้ถูกกำหนดให้กับค่าของ “ 157px ' และ ' 150px ” ตามตัวอย่างที่ให้ไว้ด้านบน แต่อาจแตกต่างกันไปตามภาพที่มีขนาดต่างกัน
- ถัดไป ระบุเส้นทางของ “ เทพดา ” ภาพไปยัง “ พื้นหลัง ' คุณสมบัติ. ตอนนี้ กำหนดทิศทางของ “ 0 ' และ ' 0 ” และแสดงส่วนแรกของสไปรต์รูปภาพ
หลังจากดำเนินการตามบรรทัดของโค้ดด้านบน หน้าเว็บจะมีลักษณะดังนี้:
ภาพรวมด้านบนแสดงให้เห็นว่าภาพแรกจากภาพสไปรต์แสดงบนเว็บเพจ
ขั้นตอนที่ 3: แสดงภาพตรงกลางและภาพสุดท้าย
สำหรับการแสดงรูปภาพตรงกลางและส่วนสุดท้ายจากสไปรต์รูปภาพ ให้ใส่คุณสมบัติ CSS ต่อไปนี้:
#ครึ่ง {ความกว้าง: 157px;
ความสูง: 150px;
พื้นหลัง: url ( .. / sprite.jpg ) -462px 0px
}
#เต็ม {
ความกว้าง: 157px;
ความสูง: 150px;
พื้นหลัง: url ( .. / sprite.jpg ) -770px 0px
}
คำอธิบายของข้อมูลโค้ดด้านบน:
-
- ขั้นแรก เลือก “ ครึ่ง ” id และแทรกคุณสมบัติ CSS เดียวกันกับที่ใช้ในขั้นตอนข้างต้น
- หากต้องการแสดงรูปภาพตรงกลางจากสไปรต์รูปภาพ ให้เปลี่ยนทิศทางหรือกำหนดระยะห่างจากด้านซ้าย ตัวอย่างเช่น ทิศทางจากซ้ายถูกกำหนดเป็น “ ลบ 462px '.
- ในทำนองเดียวกันให้แสดงภาพสุดท้ายโดยกำหนดทิศทางจากซ้ายไปที่ “ -770px '.
หลังจากดำเนินการตามคุณสมบัติ CSS ด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
ภาพรวมด้านบนแสดงให้เห็นว่าภาพทั้งสามจากภาพสไปรต์ได้แสดงบนหน้าเว็บแล้ว
บทสรุป
“ สไปรต์รูปภาพ ” คือรูปภาพขนาดใหญ่รูปเดียวที่ประกอบขึ้นจากรูปภาพขนาดเล็กหลายรูป เช่นเดียวกับคุณสมบัติการจับแพะชนแกะ และสามารถแสดงส่วนใด ๆ ของรูปภาพขนาดใหญ่ที่แทนรูปภาพขนาดเล็กได้ ตามข้อกำหนดโดยใช้ “ พื้นหลัง ” คุณสมบัติที่จัดทำโดย CSS หากต้องการแสดงรูปภาพเฉพาะจากสไปรต์รูปภาพ ให้ตั้งค่าความกว้างและความสูงของรูปภาพก่อน หลังจากนั้นให้ใช้ค่าทิศทางเพื่อแสดงเฉพาะส่วนของภาพจากสไปรต์รูปภาพ