स्प्राइट

Question

से सीएसएस में पृष्ठभूमि टुकड़ा निकालें स्प्राइट्स छोटे आइकन के लिए अच्छी तरह से काम करते हैं जो आयाम नहीं बदलते हैं, लेकिन मैं बटन और div पृष्ठभूमि जैसी चीजों के लिए 1px विस्तृत पृष्ठभूमि स्लाइस का उपयोग करता हूं। क्या इन स्लाइसों को sprites में शामिल करने का कोई तरीका है? ऐसा करने के लिए, एक स्प्राइट से एक छोटा सा टुकड़ा लेने और तत्व की पूरी पृष्ठभूमि पर इसे निकालने का एक तरीका होना चाहिए, अनिवार्य रूप से इसे स्प्राइट से काटकर इसे दोहराने दें जैसे कि यह एक स्टैंडअलोन पृष्ठभूमि छवि थी।

Answer 1

केवल जिस तरह से मैं सोच सकता हूं कि यह संभव होगा "एसवीजी स्टैक" के साथ।

<style> 
    svg .icon { display: none } 
    svg .icon:target { display: inline } 
</style> 

गहन विवरण में एक और अधिक यहाँ:/एसवीजी फ़ाइल के भीतर सीएसएस का एक सा माध्यम से पता चला मूल विचार है कि प्रत्येक स्प्राइट एक ही "टाइल" पर एक अलग "परत" पर है, लेकिन वे छिपे हुए हैं है : http://simurai.com/post/20251013889/svg-stacks

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

.element { 
    background: url(myBG.png); 
    background-image: -moz-linear-gradient(transparent, transparent), url(spriteStack.svg#myBG); 
} 

, आप उचित उपसर्ग के रेखीय ग्रेडिएंट जोड़ सकते हैं उनके लिए।

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

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg=="); 

आप आवृत्ति किसी भी प्रकार के साथ इस छवि को अद्यतन करने की अपेक्षा करते हैं, तो कम्पास (एक सास एक्सटेंशन) आप के लिए इन उत्पन्न कर सकते हैं (देखें: http://compass-style.org/reference/compass/helpers/inline-data/#inline-image)।

Answer 2

ऐसा लगता है कि आप ग्रेडियेंट के लिए 1px विस्तृत छवियों का उपयोग कर रहे हैं। मुझे लगता है कि आप छवि को केवल एक ही दिशा में दोहराना चाहते हैं, दोनों नहीं। यदि ऐसा है, तो आप 1px-wide छवियों का एक स्प्राइट बना सकते हैं। यह चाल है कि आप अपने स्प्राइट को किस दिशा के अनुसार चित्रों को दोहराएंगे। अगर आप उन्हें दाएं या नीचे की स्थिति में रखेंगे, तो भी ध्यान दें, उदाहरण के लिए, यदि आपके ढाल को कंटेनर के नीचे जाना है तो शायद आप उस स्प्रिट के नीचे उस ढाल को स्थानांतरित करना चाहते हैं। यदि आपकी सभी छवियां क्षैतिज रूप से दोहराती हैं, तो आप उन्हें एक फ़ाइल को दूसरे के शीर्ष पर एक साथ रख सकते हैं। मुझे छवियों के बीच कुछ पारदर्शिता पसंद है, या तो उन्हें ग्रिडलाइन के साथ लाइन करने या पर्याप्त जगह छोड़ने के लिए ताकि अन्य छवियां न दिखें।

पुरानी आईई को छोड़कर अधिकांश ब्राउज़रों में आप किसी भी छवियों का उपयोग किये बिना सीएसएस के दायरे बना सकते हैं। आईई के पुराने संस्करणों के लिए आपको छवियों का उपयोग करना होगा।

Answer 3

यदि मैं आपको सही ढंग से समझता हूं, तो मिरियम का जवाब सही उत्तर है।

मैं कुछ उदाहरणों के साथ मिरियम के उत्तर पर विस्तार से बताऊंगा।

यहां बटन का उपयोग करने के लिए ग्रेडियेंट का सीएसएस स्प्राइट है।

उपयोग सीएसएस पृष्ठभूमि स्थिति विशिष्ट ढाल आप विशिष्ट बटन के लिए उपयोग करना चाहते हैं लक्षित करने के लिए।

हालांकि छवियों के साथ ग्रेडियेंट पुराना है। अधिकांश ग्रेडियेंट्स के लिए आप एक ही परिणाम को पूरा करने के लिए बस सीएसएस और आईई-फिल्टर का उपयोग कर सकते हैं।सीएसएस के साथ भी जटिल जटिल ग्रेडियेंट बनाया जा सकता है (आईई एक मानक "एक रंग से एक रंग" ढाल के लिए गिर जाएगी। और यदि आप वास्तव में चाहते हैं कि IE8 उपयोगकर्ता के पास आधुनिक ब्राउज़र के समान दृश्य हो, तो भी आप एक छवि को फ़ॉलबैक के रूप में उपयोग कर सकते हैं ।

यहाँ एक महान उपकरण (फ़ोटोशॉप की तरह) ढ़ाल बनाने के लिए है और बस कॉपी/पेस्ट कोड उत्पन्न: http://www.colorzilla.com/gradient-editor/