सीएसएस - पृष्ठभूमि छवियों के रूप में स्प्राइट्स

Question

मेरे पास एक वेब एप्लिकेशन है जिसका प्रदर्शन मैं बढ़ाने के लिए काम कर रहा हूं। ऐसा करने के प्रयास में, मैंने सीएसएस स्प्राइट्स का उपयोग करने का फैसला किया। मैंने अपनी सभी छवियों को .pl फ़ाइल में रखा है जिसे images.png कहा जाता है।

CSS स्प्राइट सभी सीएसएस वर्गों है कि बस एक छवि एक बार प्रदर्शित करने के लिए अच्छी तरह से काम किया है। हालांकि, मेरी कई छवियों को दोहराने की जरूरत है। उदाहरण के लिए, मेरे पास बैनर पृष्ठभूमि के लिए उपयोग की गई banner.png छवि है। जब भी मैं पृष्ठभूमि-दोहराना संपत्ति सेट करता हूं, ऐसा लगता है कि छवि दोहराना नहीं है। मेरी सीएसएस परिभाषाओं दिखाने के लिए, यहाँ वे हैं:

Before CSS Sprites 
------------------ 
.ghwc { 
    background-image: url(/images/layout/banner.png); 
    background-repeat:repeat-x; 
    color:White; 
    width:300px; 
} 

After CSS Sprites 
----------------- 
.ghwc { 
    background-image: url(/images/images.png); 
    background-repeat:repeat-x; 
    color:White; 
    background-position:60px 319px; 
    width:300px; 
} 

मेरा प्रश्न है, मैं कैसे पृष्ठभूमि की तरह बार-बार छवियों के लिए CSS स्प्राइट प्रयोग करते हैं?

धन्यवाद,

Answer 1

मेरा प्रश्न है, मैं कैसे पृष्ठभूमि की तरह बार-बार छवियों के लिए CSS स्प्राइट प्रयोग करते हैं?

आप नहीं करते हैं। सीएसएस स्प्राइट्स का उपयोग करना संभव नहीं है। ऐसा करने के लिए, आप छवि है कि दोहराया जाना के एक क्षेत्र को निर्दिष्ट करने के लिए सक्षम होने के लिए है, और मेरी जानकारी के लिए है कि दोनों सीएसएस 2 और 3

Answer 2

में असंभव है अपनी पृष्ठभूमि छवि (images.png) मान लिया जाये बिल्कुल दिखाता है, आपका कोड काम करना चाहिए। आप इस सही ढंग से ओपेरा और Firefox पर प्रस्तुत करना चाहते हैं, आप

पृष्ठभूमि लगाव जोड़ने की आवश्यकता होगी: तय;

संपादित करें: मैं बस एहसास हुआ कि आप शायद के बारे में एक विशिष्ट कई 'चित्र' के शामिल एक "स्प्राइट" छवि में सेट निर्देशांक बात कर रहे हैं। आपको इस तरह दोहराने के लिए किसी छवि का कोई विशेष क्षेत्र नहीं मिल रहा है। जिस छवि के बारे में आप चिंतित हैं उस छवि को क्रॉप करें, फिर आपके पास मौजूद कोड का उपयोग करें।

Answer 3

उदाहरण के तौर पर आप केवल background-repeat:repeat-x; हैं, तो आपको केवल स्प्राइट छवि कंटेनर के भीतर समान सभी पृष्ठभूमि बनाने की आवश्यकता है और स्प्राइट छवि फ़ाइल को लंबवत रूप से बाहर रखना होगा। फिर आपकी पृष्ठभूमि स्थिति संपत्ति में हमेशा पहली एक्स स्थिति 0 होगी और स्प्राइट दूसरी वाई स्थिति (उदा। background-position:0 0; background-position:0 -100px; background-position:0 -200px; आदि) के साथ स्थित है। यदि आप सटीक ऊंचाई निर्दिष्ट नहीं कर सकते हैं और overflow:hidden सेट कर सकते हैं तो यह सभी ब्राउज़रों में काम नहीं कर सकता है।

Answer 4

आप उपयोग करना दोहराने-x चाहते हैं, तो आप अपने स्प्राइट में अगले एक-दूसरे से कई छवियों डाल नहीं होना चाहिए के रूप में पूरे स्प्राइट एक्स-दिशा में दोहराया गया है (जैसा कि आप पहले से ही देखा है)। लेकिन आप उन्हें एक लंबवत रेखा में डाल सकते हैं। (यदि आप दोहराना-वाई का उपयोग करना चाहते हैं तो दूसरी तरफ। "पृष्ठभूमि-फसल" जैसी कुछ भी नहीं है (शायद सीएसएस 4 में;))