การแนะนำบทความของ wulin.com (www.vevb.com): CSS Sprite บางครั้งเรียกว่า Sprite และ Elf Picture เป็นปัญหาที่การเปิดการเปิดภาคการแข่งขันทุกครั้งและยังเป็นวิธีการทั่วไปของการเพิ่มประสิทธิภาพการโหลดภาพขนาดเล็ก ฉันเชื่อว่านักเรียนทุกคนรู้หลักการดังนั้นฉันจะไม่เข้าไปดูรายละเอียด
CSS Sprite บางครั้งเรียกว่า Sprite และ Sprite เป็นปัญหาที่ทุกด้านเปิดเปิดและยังเป็นวิธีการทั่วไปของการเพิ่มประสิทธิภาพการโหลดภาพขนาดเล็ก ฉันเชื่อว่านักเรียนทุกคนรู้หลักการดังนั้นฉันจะไม่เข้าไปดูรายละเอียด
ฉันได้รับแรงจูงใจให้ใช้ HTML5 เพื่อตระหนักถึงเครื่องมือสำหรับการสังเคราะห์ภาพสไปรต์ซึ่งอำนวยความสะดวกในการพัฒนาโครงการขนาดเล็กอย่างรวดเร็วและลดแรงงานเชิงกลบางอย่างเช่นการเปิด Photoshop ดอกไม้ไฟและเครื่องมืออื่น ๆ เพื่อรวมภาพ เมื่อเร็ว ๆ นี้ฉันใช้เวลาในการตั้งครรภ์และนำไปใช้
ไป! PNG บทนำ:ฟังก์ชั่นปัจจุบันมีดังนี้:
คำแนะนำสำหรับการใช้งาน: 1. ลากและวางไฟล์ภาพขนาดเล็กไปยังพื้นที่ทำงานดังที่แสดงด้านล่าง: 2. การตั้งค่าแอตทริบิวต์คลาสอินพุตและภาพเป้าหมายและการสร้างไฟล์ CSS ดังแสดงในรูปด้านล่าง 3. ไฟล์ CSS ที่สร้างขึ้นสามารถปรับแต่งได้โดยการเปลี่ยนเทมเพลต CSSฟังก์ชั่นเทมเพลตที่ใช้คือ micro-templation ของ John Resig
ตัวแปรที่สามารถใช้ได้คือ:
คำอธิบายของ X, Y, W และ H มีดังนี้:
การตั้งค่าของเทมเพลต CSS มีดังนี้:
4. หลังจากสร้างภาพเป้าหมายและ CSS คุณสามารถดาวน์โหลดได้โดยตรงคลิกปุ่มดาวน์โหลดเพื่อให้ดาวน์โหลดเสร็จ:
5. การส่งออกสถานะการทำงานฟังก์ชั่นนี้สามารถส่งออกสถานะการทำงานปัจจุบันของคุณรวมถึงข้อมูลรูปภาพ (รูปภาพการจัดเรียงตำแหน่งรูปภาพ) การตั้งค่าพารามิเตอร์ (รวมถึงการตั้งค่าพารามิเตอร์หน้าแรกและการตั้งค่าเทมเพลต CSS) เป็นไฟล์เดียวและคุณสามารถกู้คืนสถานะการทำงานของคุณในครั้งต่อไปโดยใช้ไฟล์นี้
ส่งออกรูปต่อไปนี้:
นำเข้ารูปต่อไปนี้:
สามารถกู้คืนได้: