सीएसएस स्प्राइट्स छवियों को दोहराना

Question

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

धन्यवाद।

Answer 1

संक्षिप्त उत्तर "नहीं" है।

स्पष्टीकरण यह है कि दोहराने वाली छवियों को पूरी तरह से प्रदर्शित किया जाता है जो वे दोहराते हैं। इसलिए, repeat-x पर सेट की गई पृष्ठभूमि क्षैतिज दिशा में सभी छवि सामग्री दिखाएगी। यही कारण है कि आप sprites का उपयोग कर दोनों दिशाओं में एक साथ दोहराना नहीं कर सकते हैं।

Answer 2

मैं जानता हूँ कि मानक सब न दोहराई छवियों और एक और छवि सभी दोहरा छवियों का उपयोग करने का उपयोग कर 1 छवि बनाने के लिए है।

मुझे लगता है कि आप गलत हैं। छवि के एक खंड को चुनिंदा रूप से टाइल करना असंभव है। आप केवल अपनी छवि को पूरी तरह से टाइल कर सकते हैं। इस प्रकार, सभी दोहराने वाली छवियों को अपनी छवि फ़ाइलों में रहना चाहिए।

Answer 3

@Ryan किनल सही है जब answer में कह रहा है कि एक स्प्राइट छवि का उपयोग पृष्ठभूमि छवियों (दोनों दिशाओं में) को दोहराने के लिए नहीं किया जा सकता है।

अभी भी एक या दो फाइलों (छवियों नहीं) के साथ क्रॉस-ब्राउजर करने का एक तरीका है, लेकिन यह इतना आसान नहीं है और संशोधित करने के लिए जटिल साबित होना चाहिए (हालांकि sprites को संशोधित करने के लिए भी जटिल हैं, लेकिन पर कम से कम यह दृश्य है!)।

• आधुनिक ब्राउज़रों और IE8 +
• IE7 के लिए MHTML और नीचे (IE7 Vista पर के लिए टिप्पणियों देखें), फिर से खोज या Stoyan Stefanov

रूप PHPIED लेख में कहा गया है, इनलाइन द्वारा अनुवादित लिए data: base64 encoding छवियों को दो बार दोहराया जाता है लेकिन 3 सशर्त टिप्पणियों की सहायता से आप आईई 7 और नीचे एमएचटीएम फ़ाइल, आईई 8 और डेटा के साथ डेटा के साथ लक्ष्य कर सकते हैं: आधार 64 फ़ाइल और! आईई एक ही डेटा फ़ाइल के साथ। repeat-x आईएनजी स्प्राइट

एक छवि के साथ

• एक छवि no-repeat आईएनजी स्प्राइट
• एक छवि के साथ:

  आप अपने सर्वर पर 5 अलग अलग फ़ाइलों और 4 किसी भी ब्राउज़र द्वारा डाउनलोड के साथ खत्म repeat-y -ing sprites

• एमएचटीएम के लिए एक फ़ाइल (आईई 7 और नीचे की सेवा की जानी चाहिए) पृष्ठभूमि-छवियों
• एक ही दोहराने के लिए एक फ़ाइल ackground छवियों लेकिन डेटा के लिए IE8 + और! आईई इनकोडिंग ब्राउज़र

बड़े दोहराई जाने वाली छवियों फ़ाइल आकार एक बहुत बढ़ सकते हैं के रूप में एन्कोड नहीं किया जाना चाहिए, अपने डिजाइन बदल सकता है।

Answer 4

दुर्भाग्य से आप दोनों प्रकार की छवियों को उसी स्प्राइट पर काम करने के लिए मजबूर नहीं कर सकते हैं। आम तौर पर दोहराने वाली छवि एक बड़ी छवि (ढाल) का एक छोटा हिस्सा है जिसे लोडिंग समय और आकार को बचाने के लिए दोहराया जा सकता है। आप क्षैतिज, लंबवत और दोनों छवियों को दोहरा सकते हैं।
repeat-x, repeat-y या दोनों के लिए केवल repeat। स्प्राइट पर गैर-दोहराने वाली छवियों के लिए आपको scroll 60px -20px जैसे स्क्रॉल निर्देशांक इंगित करने की आवश्यकता है (60 पीएक्स समन्वय छोड़ दिया गया है और -20 पीएक्स शीर्ष समन्वय है)।