' छवि स्प्राइट्स ” एक ऐसी तकनीक है जिसमें एक बड़ी छवि बनाई जाती है जिसमें कई एकल छवियां होती हैं। और बड़ी छवि के किसी भी भाग को डिज़ाइन आवश्यकताओं के सापेक्ष प्रदर्शित किया जा सकता है। यह डेवलपर्स को नेत्रहीन आकर्षक तत्वों को सुचारू रूप से बनाने में मदद करता है। इमेज स्प्राइट्स का उपयोग आइकन, बटन और अन्य ग्राफिक तत्वों के लिए किया जा सकता है। यह लेख CSS में इमेज स्प्राइट्स का उपयोग करने की चरण-दर-चरण प्रक्रिया को प्रदर्शित करता है।
आई. का उपयोग कैसे करें सीएसएस में दाना स्प्राइट्स?
CSS में, डेवलपर्स वेबपेज के लोडिंग समय को कम/कम करने के लिए इमेज स्प्राइट्स का उपयोग करते हैं। यह HTTP अनुरोधों को कम करने में मदद करता है, तेजी से लोडिंग सुनिश्चित करता है और उपयोगकर्ता अनुभव कारक में सुधार करता है। उदाहरण के लिए, नीचे दिए गए उदाहरण पर जाएँ:
उदाहरण: लिस्ट आइटम में इमेज स्प्राइट का उपयोग करना
इस उदाहरण में, एक आदेशित सूची बनाई गई है और प्रत्येक सूची आइटम में, स्प्राइट छवि का हिस्सा स्क्रीन पर प्रदर्शित होता है।
पूर्वापेक्षा:
छवि स्प्राइट से विशिष्ट छवि प्राप्त करने के लिए उपयोग की जा रही छवि स्प्राइट के आयाम विशेष रूप से महत्वपूर्ण हैं। उदाहरण के लिए, छवि जिसका आयाम है ' 937×156 'नीचे दिखाया गया है:
ऊपर प्रदर्शित छवि के कुछ भाग को प्रदर्शित करने के लिए नीचे दिए गए चरणों का पालन करें:
चरण 1: सूची आइटम का निर्माण
बिना क्रम वाली सूची वेबपेज पर उत्पन्न होती है, जैसा कि नीचे दिए गए कोड स्निपेट में देखा गया है:
< उल >खाली: < वह पहचान = 'खाली' > वह >
आधा: < वह पहचान = 'आधा' > वह >
भरा हुआ: < वह पहचान = 'भरा हुआ' > वह >
उल >
उपरोक्त कोड स्निपेट का विवरण:
-
- सबसे पहले, 'का प्रयोग करें <उल> 'के लिए एक कंटेनर/वातावरण बनाने के लिए टैग' अव्यवस्थित सूची 'और' का उपयोग करके तीन सूची आइटम बनाएं <वह> ' उपनाम।
- अगला, 'की आईडी असाइन करें खाली ”, “ आधा ' और ' भरा हुआ ” तीन सूची आइटम के लिए। इन्हें बाद में बड़ी छवि का हिस्सा प्रदर्शित करने के लिए उपयोग किया जाता है।
चरण 2: पहली छवि प्रदर्शित करना
वेब पेज पर खाली दिल को प्रदर्शित करने के लिए जो इमेज स्प्राइट में पहली इमेज है। उपयोग ' खाली 'आईडी और निम्नलिखित कोड डालें:
#खाली {चौड़ाई: 157 पीएक्स;
ऊंचाई: 150 पीएक्स;
पृष्ठभूमि: url ( .. / sprite.jpg ) 0 0 ;
}
कोड की उपरोक्त पंक्ति में:
-
- सबसे पहले, 'सेट करें' चौड़ाई ' और ' ऊंचाई ” छवि की जिसे डेवलपर वेब पेज पर प्रदर्शित करना चाहता है।
- इन गुणों को 'के मूल्यों को सौंपा गया है' 157 पीएक्स ' और ' 150 पीएक्स ” ऊपर दिए गए उदाहरण के अनुसार, लेकिन वे विभिन्न आयामों वाली छवियों के सापेक्ष भिन्न हो सकते हैं।
- अगला, का मार्ग प्रदान करें ' प्रेत 'छवि को' पृष्ठभूमि ' संपत्ति। अब, की दिशा निर्धारित करें ' 0 ' और ' 0 ” और यह छवि स्प्राइट के पहले भाग को प्रदर्शित करता है।
कोड की उपरोक्त पंक्ति के निष्पादन के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त स्नैपशॉट से पता चलता है कि छवि स्प्राइट से पहली छवि वेबपेज पर प्रदर्शित होती है।
चरण 3: मध्य और अंतिम छवि प्रदर्शित करना
इमेज स्प्राइट से मध्य और अंतिम छवि भाग प्रदर्शित करने के लिए, निम्नलिखित सीएसएस गुण डालें:
#आधा {चौड़ाई: 157 पीएक्स;
ऊंचाई: 150 पीएक्स;
पृष्ठभूमि: url ( .. / sprite.jpg ) -462 पीएक्स 0 पीएक्स
}
#भरा हुआ {
चौड़ाई: 157 पीएक्स;
ऊंचाई: 150 पीएक्स;
पृष्ठभूमि: url ( .. / sprite.jpg ) -770 पीएक्स 0 पीएक्स
}
उपरोक्त कोड स्निपेट का विवरण:
-
- सबसे पहले, 'का चयन करें आधा ” id और वही CSS गुण डालें जो उपरोक्त चरण में उपयोग किए गए हैं।
- इमेज स्प्राइट से मध्य छवि प्रदर्शित करने के लिए, दिशा बदलें या बाईं ओर से पैडिंग असाइन करें। उदाहरण के लिए, बाईं ओर से दिशा 'पर सेट है' नकारात्मक 462 पीएक्स ”।
- उसी तरह, बाईं ओर से 'पर सेट करके अंतिम छवि प्रदर्शित करें' -770 पीएक्स ”।
उपरोक्त सीएसएस गुणों के निष्पादन के बाद, वेबपेज इस तरह दिखाई देता है:
उपरोक्त स्नैपशॉट से पता चलता है कि छवि स्प्राइट से तीन छवियां वेबपेज पर प्रदर्शित की गई हैं।
निष्कर्ष
' छवि स्प्राइट्स ” एक बड़ी छवि है जो कोलाज फीचर की तरह ही कई छोटी छवियों से बनी है। और छोटी छवि का प्रतिनिधित्व करने वाली बड़ी छवि का कोई भी भाग प्रदर्शित किया जा सकता है। का उपयोग कर आवश्यकताओं के अनुसार ' पृष्ठभूमि “सीएसएस द्वारा प्रदान की गई संपत्ति। इमेज स्प्राइट से विशिष्ट इमेज प्रदर्शित करने के लिए, पहले इमेज की चौड़ाई और ऊंचाई सेट करें। उसके बाद, इमेज स्प्राइट से इमेज के केवल भाग को प्रदर्शित करने के लिए दिशा-निर्देश मानों का उपयोग करें।