मैं एक div के लिए पृष्ठभूमि छवि सेट करना चाहता हूं, जिस तरह से यह div के ऊपरी दाएं भाग में है, लेकिन ऊपर और दाएं से निश्चित 10px दूरी के साथ।सही से शुरू होने वाली पृष्ठभूमि-स्थिति को पूर्ण दूरी पर कैसे सेट करें?
background: url(images/img06.gif) no-repeat 10px 10px;
एक ही परिणाम प्राप्त करने के लिए वैसे भी वहाँ है, लेकिन ऊपरी दाएँ पर पृष्ठभूमि दिखा:
यहाँ मैं कैसे करना होता है कि अगर यह div के ऊपरी बाएँ में चाहता था है?
एक शीर्ष और सही मार्जिन के साथ जैसा कि पहले उल्लेख नियम का उपयोग करें:
background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;
पृष्ठभूमि चित्रों से केवल गद्दी भीतर मार्जिन दिखाई देते हैं, नहीं। यदि मार्जिन जोड़ना एक विकल्प नहीं है तो आपको किसी अन्य div का सहारा लेना पड़ सकता है, हालांकि मैं आपको सलाह देता हूं कि आप केवल अंतिम उपाय के रूप में उपयोग करें और जितना संभव हो सके अपने मार्कअप को दुबला और सिमेंटिक रखें।
अगर यह शुद्ध सीएसएस में संभव है मैं नहीं जानता, तो आप
background: url(images/img06.gif) no-repeat top right;
कोशिश करते हैं और अपनी छवि को संशोधित कर सकते हैं शीर्ष पर और सही एक पारदर्शी रंग में एक 10px सीमा को शामिल करने
मैं एक शुद्ध सीएसएस मार्ग खोज रहा था, लेकिन अगर यह एकमात्र तरीका है ... – bahadorn
ऐसा कुछ तरीके हैं जो आप कर सकते हैं।
यदि संभव हो तो गणित को स्वयं करें। आप पहले से ही अपनी छवि के आयामों को जानते हैं। यदि आप div के आयामों को जानते हैं, तो आप छवि को केवल (div चौड़ाई - छवि चौड़ाई - 10, div ऊंचाई - छवि ऊंचाई - 10) पर रख सकते हैं।
आपके लिए भारी उठाने के लिए जावास्क्रिप्ट का उपयोग करें। उपर्युक्त के रूप में बहुत अधिक वही विधि, सिवाय इसके कि आपको div के आयामों को जानने की आवश्यकता नहीं है। जावास्क्रिप्ट आपको बता सकता है।
एक और हैकिश तरीका आपकी छवि के शीर्ष और दाईं ओर एक 10px पारदर्शी सीमा डालना होगा, और स्थिति को top right पर सेट करना होगा।
एक समाधान बिल्कुल खाली div को स्थिति देने और पृष्ठभूमि देने के लिए है। मुझे विश्वास नहीं है कि इसे सीएसएस के साथ पूरी तरह से करने का कोई तरीका नहीं है, छवि में कोई बदलाव नहीं है, और द्रव लेआउट में कोई अतिरिक्त मार्कअप नहीं है।
आप उपयोग कर सकते हैं प्रतिशत:
background: url(...) top 98% no-repeat;
आप माता पिता div यह निर्धारित करने के लिए कितने प्रतिशत आप उपयोग करने की आवश्यकता बहुत आसान होना चाहिए की चौड़ाई पता है।
मुझे यह जानकर आश्चर्य हुआ कि 100% पृष्ठभूमि-छवि के लिए 'दाएं' जैसा ही है, हालांकि यदि पैरेंट div की चौड़ाई तय की गई है, तो पिक्सेल ऑफसेट का सीधे उपयोग करना अधिक सटीक है। – EoghanM
यदि आपके पास itmes –
सही स्वरूप है:
background: url(YourUrl) 0px -50px no-repeat;
कहाँ 0px क्षैतिज स्थिति है और -50px ऊर्ध्वाधर स्थिति है।
सीएसएस background-position नकारात्मक मान स्वीकार करता है।
फ़ायरफ़ॉक्स, आईई 9 और ओपेरा 10 में।एक चार मूल्य वाक्य रचना 5 आप उपयोग कर सकते हैं, specified in CSS3:
background-position: right 10px top 10px;
स्रोत: MDN
आप कर सकते हैं नकली पिक्सल में एक सीमा (सफेद समय या शायद कुछ से अधिकांश के साथ दाहिने हाथ की ओर अंतरिक्ष अन्य)
background-image: url(../images/calender.svg) center right
border-right: 5px white solid
यह एक अच्छा समाधान है, लेकिन चूंकि मैं सीमा प्रदर्शित करना चाहता था, इसलिए इसे एक और गैर-अर्थात् div । मैं एक सीएसएस पृष्ठभूमि के बजाय![]()
टैग का उपयोग कर समाप्त हुआ और अंत में मेरे लिए अच्छा काम किया। –
doub1ejack
मेरे मामले में मुझे 'पैडिंग-टॉप' और 'पैडिंग-राइट' मिला, एक अवधि के बाद एक छोटे आइकन को स्थानांतरित करने का समाधान था। –
यह काम कर सकता है, लेकिन इसके अन्य दुष्प्रभाव हैं। एक पृष्ठभूमि रंग पूरे तत्व को नहीं फैलाएगा, न ही आप उस तत्व में पाठ प्राप्त कर पाएंगे जो अंतिम 10px भरता है। –