2012-08-15 11 views
8

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

1 छवि:
enter image description here

2 छवि:
enter image description here

उत्तर

3

आप दो अलग-अलग उपयोग करने के लिए करने जा रहे हैं इस छवि को काम करने के लिए आइकन छवियों को इस समय आप उम्मीद करते हैं।

सीएसएस स्प्राइट्स के साथ, पृष्ठभूमि तत्व के आकार से चिपक जाती है, वहां एक प्रयोगात्मक CSS3 प्रॉपर्टी है जिसे background-clip कहा जाता है लेकिन यह आपके इच्छित तरीके से काम नहीं करता है (यह सीमाओं, पैडिंग या सामग्री को क्लिप करेगा बॉक्स, एक विशिष्ट आयाम नहीं।)

तो दो आइकन बनाएं, background-position के साथ तत्व के प्रत्येक पक्ष पर एक का उपयोग करें।

As you can see here, एक स्प्राइटशीट के साथ यह आपके इच्छित दो आइकनों की बजाय पूरी पृष्ठभूमि छवि प्रदर्शित करेगा। जिस तरह से आप चाहते हैं बीजी छवियों को क्लिप करने के लिए अभी तक कोई रास्ता नहीं है। (एक दिन, उम्मीद है!)

+0

यही वह है जिसके साथ मैं आया था।क्या आप सुनिश्चित हैं कि कोई दूसरा रास्ता नहीं है? –

+0

दुर्भाग्य से यह अभी तक एकमात्र तरीका है, शायद एक दिन इसे लागू किया जाएगा, लेकिन अभी के लिए, 2 आइकन इस के साथ जाने का एकमात्र तरीका है :) – Kyle

+0

उम्मीद है कि वह दिन जल्द ही पास हो जाएगा! धन्यवाद। ;) –

1

अपने तत्व के लिए सेट (के div मान लीजिए) yor बड़ा backgound चित्र और फिर background-position साथ समायोजित करें। आपकी छवि आपके तत्व आकार (उदा। Div) द्वारा फसल की जाएगी।

अपने मामले में इसके चारों ओर हो जाएगा:

background-position: -87 -35; 

और div आकार:

width: 28px; height: 30px 
+0

कृपया प्रश्न को दोबारा पढ़ें। मेरे पास एक इनपुट तत्व है और मुझे इसे ऊपर की छवि में दिखाए गए जितना बड़ा होना चाहिए। –

+0

यहां मैं इस बारे में बात कर रहा हूं: http://jsfiddle.net/jg7C6/3/ – Samich

+0

मुझे अब मिल गया है। धन्यवाद। –

0

CSS3 साथ आप एक तत्व के लिए कई पृष्ठभूमि छवियों का उपयोग कर सकते हैं। उस छवि से एक विशिष्ट भाग दिखाने के लिए जिसकी आपको background-position संपत्ति सेट करने की आवश्यकता है।

background-image: url(sprites.png), url(sprites.png); 
background-position: center bottom, left top; 

आप भी background-postion तरह पिक्सल में परिभाषित कर सकते हैं:

उदाहरण के लिए

background-position: -5px 10px, -35px 10px; 

अधिक जानकारी के लिए जाँच इस link

+0

धन्यवाद, लेकिन यह मैंने नहीं पूछा। मुझे पता है कि कई पृष्ठभूमि का उपयोग कैसे करें। मेरा मुख्य सवाल पृष्ठभूमि छवि को क्लिप करना था। –

2

आपको अलग-अलग आइकन का उपयोग करने की आवश्यकता होगी या आपको इनपुट बॉक्स के शीर्ष पर 2 अतिरिक्त तत्व (आइकन दिखाने के लिए) की आवश्यकता होगी। उत्तरार्द्ध आपको स्प्राइट का उपयोग करने देगा।

+0

उत्तरार्द्ध स्प्राइटशीट के लेआउट को फिर से ऑर्डर किए बिना स्प्राइट को मुख्य 'इनपुट' पर इस्तेमाल करने की अनुमति नहीं देगा। – Kyle

+0

@KyleSevenoaks - स्प्राइट को ओवरलैड तत्वों के लिए पृष्ठभूमि के रूप में लागू करने की आवश्यकता होगी, न कि इनपुट बॉक्स स्वयं। चूंकि आपने कहा था, बीजी को आज के सीएसएस तकनीक से नहीं जोड़ा जा सकता है। – techfoobar

+0

आह, अब मैं आपको प्राप्त करता हूं। ठीक है कि काम करेगा लेकिन कुछ अनियंत्रित मार्कअप की आवश्यकता होगी। – Kyle

संबंधित मुद्दे

 संबंधित मुद्दे