CSS इमेज स्प्राइट एक दस्तावेज़ पृष्ठ में सभी चित्रों की एक संयुक्त छवि फ़ाइल है। इमेज स्प्राइट्स आना उपयोगी है क्योंकि इमेज रिसोर्सेज को केवल एक बार लोड करना होगा। CSS पृष्ठभूमि-स्थिति का उपयोग करके संयुक्त छवि के विभिन्न भागों को दिखाया जा सकता है।

आइए CSS इमेज स्प्राइट्स के लिए एक उदाहरण देखें -

उदाहरण

  <शीर्षक> <शीर्षक> <शीर्षक> <शैली प्रकार ="पाठ / सीएसएस">। स्प्राइट { पृष्ठभूमि:यूआरएल ("कैप्चर। पीएनजी") नो-रिपीट; चौड़ाई:280px; ऊंचाई:200px; प्रदर्शन:इनलाइन-ब्लॉक;}.flag1 {पृष्ठभूमि-स्थिति:0px 0px;}.flag2 {पृष्ठभूमि-स्थिति:-255px 0px;}.flag3 {पृष्ठभूमि-स्थिति:-510px 0px;}.flag4 {पृष्ठभूमि-स्थिति:- 765px 0px;}body { text-align:center;}
फ्लैग इमेज स्प्राइट
 



 
आउटपुट