सीएसएस का उपयोग करके दाईं ओर से एक पृष्ठभूमि छवि को बंद करें

443

क्या एक पृष्ठभूमि छवि को अपने तत्व के दाईं ओर से पिक्सेल की एक निश्चित संख्या की स्थिति के लिए एक तरीका है?

उदाहरण के लिए, बाईं ओर से कुछ निश्चित पिक्सल (जैसे, 10) की स्थिति के लिए , यह है कि मैं यह कैसे करूंगा:

#myElement {
    background-position: 10px 0;
}

css

— nickf
स्रोत

आप निश्चित रूप से मतलब नहीं है background-position: -10px 0;? बस चेकिंग :)

— ३३

1

मुझे पता है कि इसमें कई डुप्लिकेट हैं लेकिन मैं उनमें से किसी को भी खोजने में असमर्थ हूं।

— पेका

1

@thirtydot जो इसे हिलाता है, बाएं किनारे से 10 पिक्सल छोड़ता है।

— निकल

यह बेवकूफ है कि यह उपलब्ध नहीं है ...

— जुआन

@ क्या आपको लगता है कि यह 2013 के अंत तक अधिकांश उपकरणों में उपलब्ध नहीं था?

— जुआन

786

मुझे यह CSS3 फीचर मददगार लगा:

/* to position the element 10px from the right */
background-position: right 10px top;

जहाँ तक मुझे पता है कि यह IE8 में समर्थित नहीं है। नवीनतम क्रोम / फ़ायरफ़ॉक्स में यह ठीक काम करता है।

देखें क्या मैं समर्थित ब्राउज़रों पर विवरण के लिए उपयोग कर सकता हूं ।

प्रयुक्त स्रोत: http://tanalin.com/en/blog/2011/09/css3-background-position/

अपडेट :

यह सुविधा अब सभी प्रमुख ब्राउज़रों में समर्थित है, जिसमें मोबाइल ब्राउज़र भी शामिल हैं।

— स्टीवन
स्रोत

23

यह बहुत अच्छा है, लेकिन दुर्भाग्य से यह सफारी 5.1.7 पर काम नहीं करता है (जो कि मोबाइल फोन द्वारा देखा जाए तो बेहद महत्वपूर्ण है)

— मोशे एलिशा

5

यह अब मोबाइल उपकरणों (Android, iOS और WindowsPhone पर जांचा गया) पर काम करता है। अभी भी सफारी 5.1.7 यहाँ की तरह पृष्ठभूमि की स्थिति का समर्थन नहीं करता है।

— स्ज़ोरस्टकी

8

मैं इसका उपयोग कर रहा हूं, लेकिन पुराने ब्राउजर के लिए प्रतिशत में गिरावट के साथ। पृष्ठभूमि-स्थिति: 95% केंद्र; पृष्ठभूमि-स्थिति: सही 13px केंद्र;

— ग्रगदेव

1

यह सुनिश्चित करने के लिए नहीं कि कितने लोग अभी भी ब्राउज़र का उपयोग कर रहे हैं, यह समर्थन नहीं करता है। सफारी उपयोगकर्ता अब तक एक नए संस्करण पर होना चाहिए, हालांकि बहुत सारे पुराने एंड्रॉइड डिवाइस अभी भी बाहर हैं। caniuse.com/#feat=css-background-offsets इन के लिए एक प्रतिशत कमबैक का उपयोग करने के लिए पर्याप्त आसान है (हालांकि यह बिल्कुल वैसा ही नहीं है)।

— मार्क

29

कृपया ध्यान दें कि यह केवल तभी काम करता है जब आप ऊर्ध्वाधर और क्षैतिज स्थिति जैसे कि दोनों के लिए एक कार्डिनल स्थिति निर्दिष्ट करते हैं right left top bottom। उदाहरण के लिए, निम्नलिखित प्रस्तुत नहीं करेगा: background-position: right 10px 10pxलेकिन लिखा जाना चाहिएbackground-position: right 10px top 10px

— chadiusvt

110

!! बकाया जवाब, जब से CSS3 ने यह सुविधा लाई है

क्या एक पृष्ठभूमि छवि को अपने तत्व के दाईं ओर से पिक्सेल की एक निश्चित संख्या की स्थिति के लिए एक तरीका है?

नहीं।

लोकप्रिय workarounds शामिल हैं

सेटिंग margin-rightइसके बजाय तत्व पर
छवि के लिए पारदर्शी पिक्सेल को जोड़ना और इसे स्थिति देना top right
या तत्व की चौड़ाई ज्ञात होने के बाद jQuery का उपयोग करके स्थिति की गणना करना।

— users
स्रोत

6

विस्तारित CSS3 'पृष्ठभूमि-स्थिति' के लिए अधिक व्यापक समर्थन कोने के चारों ओर है: stackoverflow.com/questions/501375/…

— व्लाद मैग्डलिन

92

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

कोड:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

— मैट ब्रॉक
स्रोत

30

+1 "हम अगले सप्ताह पिक्सेल संरेखण से गुजरेंगे" - हमेशा काम करता है।

— चांदवेव 99

2

यह समाधान ब्राउज़र में लगातार काम करता है।

— इवान हास

49

आउटडेटेड उत्तर: यह अब प्रमुख ब्राउज़रों में लागू किया गया है, इस प्रश्न के अन्य उत्तर देखें।

CSS3 ने विनिर्देश को संशोधित किया है background-positionताकि यह अलग मूल बिंदु के साथ काम करेगा। दुर्भाग्य से, मुझे ऐसा कोई प्रमाण नहीं मिला है कि यह किसी भी प्रमुख ब्राउज़रों में अभी तक लागू हो।

http://www.w3.org/TR/css3-background/#the-background-position उदाहरण 12 देखें।

background-position: right 3em bottom 10px;

— Tami
स्रोत

धन्यवाद तामी! दुर्भाग्य से, यह नहीं काम मेरे लिए या तो Firefox 4 या क्रोम 11 में किया था

— nickf

यह ओपेरा में लागू किया गया है। सोचा कि यह सच होना बहुत अच्छा है और फिर मैंने अन्य ब्राउज़रों में परीक्षण किया और मैं सही था।

— वियन एस्टेरुझिज़न

1

यह अभी भी क्रोम के वर्तमान संस्करण में काम नहीं करता है। Version 21.0.1180.89

— andlrc

3

क्रोम कैनरी (v26) अब इसका समर्थन करता है। एक बार जब यह रिलीज़ चैनल पर नीचे चला जाता है, और सफारी अपने इंजन को अपडेट करता है, तो केवल IE6-8 को समर्थन की कमी होगी (IE9 / 10 पहले से ही नए प्रारूप का समर्थन करता है)।

— व्लाद मैग्डलिन

1

बस इसका परीक्षण किया है, और यह अब फ़ायरफ़ॉक्स (v.18.0.2), IE (v.9.0.8) और क्रोम (v.25.0.1364.97) में काम कर रहा है, लेकिन यह अभी तक सफारी में काम नहीं कर रहा है (v.5.1.2) । जानना पसंद करेंगे कि क्या किसी को पता है कि कब रोल आउट किया जा सकता है ;-)

— चाए कूपर

40

जैसा कि यहां प्रस्तावित है , यह एक सुंदर क्रॉस ब्राउज़र समाधान है जो पूरी तरह से काम करता है:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

मैंने इसका उपयोग तब से किया था जब से उत्तर में प्रस्तावित ऑफसेट को निर्दिष्ट करने की CSS3 सुविधा के रूप में प्रश्न को हल करने के लिए ब्राउज़रों में इतनी अच्छी तरह से समर्थित नहीं है। उदाहरण के लिए

— luksak
स्रोत

1

उस सीमा के बारे में क्या होगा जब मुझे एक निश्चित रंग का होना चाहिए?

— मशिनहेडडिक्ट

1

यह एक शानदार उत्तर है क्योंकि आप क्रॉस-ब्राउज़र को संगत रखते हुए पिक्सेल सटीक रख सकते हैं। धन्यवाद! (और यदि आप एक सीमा चाहते हैं जो एक निश्चित रंग है, तो इनपुट को लपेटने और उस तत्व में सीमा जोड़ने के लिए कुछ प्रकार के आवरण का उपयोग करें।)

— गेविन

23

सर्वाधिक उपयुक्त उत्तर पृष्ठभूमि की स्थिति के लिए नई चार मूल्य वाक्य रचना है, लेकिन जब तक सभी ब्राउज़रों का समर्थन अपने सबसे अच्छा तरीका निम्न क्रम में पहले प्रतिक्रियाओं का एक संयोजन है:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

— Stedman
स्रोत

15

एक सरल लेकिन गंदी चाल है कि आप जिस छवि को पृष्ठभूमि के रूप में उपयोग कर रहे हैं उसे केवल ऑफसेट जोड़ना चाहते हैं। यह बनाए रखने योग्य नहीं है, लेकिन यह काम पूरा करता है।

— Merosi
स्रोत

8

यह IE (ब्राउज़र समर्थन) के अलावा अधिकांश आधुनिक ब्राउज़रों पर काम करेगा । हालांकि उस पृष्ठ की सूची> = IE9 समर्थित है, मेरे परीक्षण इससे सहमत नहीं थे।

आप कैल्क () सीएसएस 3 संपत्ति का उपयोग कर सकते हैं;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

मेरे लिए यह सबसे सही और सबसे तार्किक तरीका है कि एक मार्जिन को दाईं ओर प्राप्त किया जा सके। मैं border-right: 10px solid transparent;IE के लिए उपयोग करने का एक कमबैक भी उपयोग करता हूं ।

— नोवोकेन
स्रोत

1

यह बहुत अच्छा है, लेकिन दुर्भाग्य से यह सफारी 5.1.7 पर काम नहीं करता है (जो कि मोबाइल फोन द्वारा देखा जाए तो बेहद महत्वपूर्ण है)

— मोशे एलिशा

फिर आपको एक पृष्ठभूमि-स्थिति का उपयोग करना चाहिए जो सफारी में काम करता है, और एक जिसे ब्राउज़र द्वारा ओवरराइड किया जा सकता है जो इसका उपयोग कर सकता है। उदाहरण के लिए: background-position: 92% 8px; background-position: calc(100% - 12px) 8px;

— लाकी पोलिटिस

सभी ब्राउज़रों पर काम नहीं करता है यार। right 10px centerवाक्य रचना ब्राउज़रों में अधिक विस्तारित समर्थन हासिल है।

— फ़रज़ाद YZ

कृपया पहली पंक्ति पढ़ें जहां मैं बताता हूं कि यह "सबसे आधुनिक ब्राउज़रों" पर काम करता है। मैंने कभी नहीं कहा कि यह उन सभी पर काम करता है।

— नोवोकेन

कैनीयूज़ के अनुसार, एक कैल्क के उपयोग से IE9 दुर्घटनाग्रस्त हो जाएगा ... एक बार जब आप _एक साथ बदल जाते हैं-

— रस्किन

4

ठीक है अगर मैं समझता हूँ कि आपके पूछने पर आप ऐसा करेंगे;

आपके पास अपना DIV कंटेनर है #main-containerऔर .my-elementवह इसके भीतर है। आपको आरंभ करने के लिए इसका उपयोग करें;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

वैसे, कक्षाओं का उपयोग करने के लिए बेहतर अभ्यास है यदि आप एक पृष्ठ के भीतर निचले स्तर के तत्व को संदर्भित करते हैं (मुझे लगता है कि आप इसलिए मेरा नाम ऊपर बदल रहे हैं।

— देसी
स्रोत

3

CSS3 विनिर्देश पृष्ठभूमि-स्थिति के लिए अलग-अलग उत्पत्ति की अनुमति देता है अब फ़ायरफ़ॉक्स 14 में समर्थित है, लेकिन अभी भी क्रोम 21 में नहीं है (जाहिरा तौर पर IE9 आंशिक रूप से उनका समर्थन करता है, लेकिन मैंने इसे स्वयं परीक्षण नहीं किया है)

Chrome समस्या के अलावा, @MattyF ने संदर्भित किया कि यहां एक अधिक संक्षिप्त सारांश है: http://code.google.com/p/chromium/issues/detail?id=95085

— टॉम गाल्टन
स्रोत

मैंने अभी इसका परीक्षण किया है, और यह अब फ़ायरफ़ॉक्स (v.18.0.2), IE (v.9.0.8) और क्रोम (v.25.0.1364.97) में काम कर रहा है, लेकिन सफारी में नहीं (v.5.1.2)

— Chaya कूपर

3

यदि आपके पास आनुपातिक तत्व हैं, तो आप उपयोग कर सकते हैं:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

इस उदाहरण में, .validचित्र के साथ वर्ग होगा और.half होगा मानक एक के आधे आकार के साथ एक पंक्ति होगी।

गंदा, लेकिन एक आकर्षण के रूप में काम करता है और यह काफी प्रबंधनीय है।

— Nighto
स्रोत

1

मेरे मामले में (निश्चित चौड़ाई के लेआउट का उपयोग करके) यह वही है जो मुझे चाहिए। धन्यवाद।

— गैविन

3

यदि आप उदाहरण के लिए एक बटन में तीर / अन्य आइकन जोड़ने के लिए इसका उपयोग करना चाहते हैं तो आप सीएसएस छद्म तत्वों का उपयोग कर सकते हैं?

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

background-position: right 0;

लेकिन अगर मुझे एक बटन के लिए डिज़ाइन किए गए तीर को जोड़ना है, तो मेरे पास यह html है:

<a href="[url]" class="read-more">Read more</a>

और सीएसएस के साथ निम्नलिखित करने के लिए करते हैं:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

का उपयोग करके: चयनकर्ता के बाद, मैं इस छोटे आइकन को शामिल करने के लिए सीएसएस का उपयोग करके एक तत्व जोड़ता हूं। आप केवल <i>ए-एलीमेंट के अंदर एक स्पैन या एलिमेंट जोड़कर ऐसा कर सकते हैं । लेकिन मुझे लगता है कि यह बटन में आइकन जोड़ने का एक क्लीनर तरीका है और यह क्रॉस-ब्राउज़र समर्थित है।

आप यहां फिडेल को देख सकते हैं: http://codepen.io/anon/pen/PNzYzZ

— Stijn_d
स्रोत

content: ''; इसके बजाय होना चाहिए content:0;लेकिन यह मेरे लिए एक उपयोगी समाधान था

— नेट

3

background-position: calc(100% - 8px);

— उत्साह मुरपा
स्रोत

2

स्थिति के रूप में केंद्र का सही उपयोग करें और फिर उसे ऑफसेट करने के लिए एक पारदर्शी बॉर्डर जोड़ें?

— आंद्रे फिगुएरा
स्रोत

1

यह बुरा नहीं है, लेकिन फिर सामग्री को दाईं ओर से स्थानांतरित कर दिया जाएगा। यह डीलब्रेकर हो भी सकता है और नहीं भी। यहाँ एक उदाहरण दिया गया है कि यह कैसा दिखता है: jsbin.com/ijewoq/1

— nickf

लगता है कि यह थोड़ा परीक्षण और त्रुटि के साथ संतुलन का मामला है :) आशा है कि यह काम करता है!

— एंड्रे फिगुएरा

2

यदि आपके पास एक निश्चित चौड़ाई तत्व है और अपनी पृष्ठभूमि छवि की चौड़ाई को जानते हैं, तो आप बस पृष्ठभूमि की स्थिति निर्धारित कर सकते हैं: तत्व की चौड़ाई - छवि की चौड़ाई - दाईं ओर आप चाहते हैं।

उदाहरण के लिए: 100px चौड़ा तत्व और 300px चौड़ी छवि के साथ, दाईं ओर 10px का अंतर पाने के लिए, आप इसे 100-300-10 = -210px पर सेट करते हैं:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

और आपको अपने तत्व के बाईं ओर अपनी छवि का सबसे सही 80 पिक्सेल और दाईं ओर 20px का अंतर मिलता है।

मुझे पता है कि यह बेवकूफ लग सकता है लेकिन कभी-कभी यह समय बचाता है ... मैं छवि के साथ नेविगेशन लिंक के लिए एक ऊर्ध्वाधर तरीके (नीचे की ओर खाई) में बहुत अधिक उपयोग करता हूं।

हालांकि यह आपके मामले पर लागू नहीं होता है।

— Julix
स्रोत

2

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

background-position: 98% 6px;

और यह जगह में चिपक गया।

— JC_Dev
स्रोत

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

— निकफ

2

हाँ! अच्छी तरह से एक पृष्ठभूमि छवि स्थिति के रूप में यद्यपि 0px बाईं ओर के ब्राउज़र के दाईं ओर से - मैं का उपयोग करें:

background-position: 100% 0px;

— डेविड जज़ी डॉसन
स्रोत