CSS
सीएसएस छवि स्प्राइट्स

वाक्य - विन्यास

• // पृष्ठभूमि-स्थिति का उपयोग करना
  पृष्ठभूमि: url ("स्प्राइट-इमेज.पिंग");
  पृष्ठभूमि-स्थिति: -20px 50px;
• // पृष्ठभूमि संपत्ति आशुलिपि
  पृष्ठभूमि: url ("sprite-image.png") -20px 50px;

टिप्पणियों

एक बुनियादी कार्यान्वयन

क्या एक छवि प्रेत है?

एक छवि स्प्राइट एक एकल परिसंपत्ति है जो एक छवि स्प्राइट शीट के भीतर स्थित है। एक छवि स्प्राइट शीट एक छवि फ़ाइल है जिसमें एक से अधिक संपत्ति होती है जिसे इससे निकाला जा सकता है।

उदाहरण के लिए:

ऊपर की छवि एक छवि स्प्राइट शीट है, और उन तारों में से प्रत्येक स्प्राइट शीट के भीतर एक स्प्राइट है। ये स्प्राइट शीट उपयोगी हैं क्योंकि वे एक ब्राउज़र बनाने के लिए HTTP अनुरोधों की संख्या को कम करके प्रदर्शन में सुधार कर सकते हैं।

तो आप एक को कैसे लागू करते हैं? यहाँ कुछ उदाहरण कोड है।

एचटीएमएल

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

सीएसएस

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

स्प्राइट की चौड़ाई और ऊंचाई निर्धारित करके और सीएसएस में पृष्ठभूमि-स्थिति संपत्ति का उपयोग करके (आप एक एक्स और वाई मूल्य के साथ) सीएसएस का उपयोग करके स्प्राइट शीट से स्प्राइट आसानी से निकाल सकते हैं।