CSS इमेज स्प्राइट एक डॉक्यूमेंट पेज की सभी तस्वीरों की संयुक्त इमेज फाइल होती है। इमेज स्प्राइट्स उपयोगी होती हैं क्योंकि इमेज रिसोर्सेज को केवल एक बार लोड करना पड़ता है। CSS background-position का उपयोग करके संयुक्त इमेज के विभिन्न भागों को दिखाया जा सकता है।
आइए CSS इमेज स्प्राइट्स का एक उदाहरण देखते हैं:
उदाहरण
<!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>
आउटपुट
