सही से एक सीएसएस पृष्ठभूमि छवि x पिक्सल स्थिति?

Question

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

यदि मैं background-positionx और y के मान सेट करता हूं , तो ऐसा लगता है कि वे केवल क्रमशः बाएं और ऊपर से निश्चित पिक्सेल समायोजन देते हैं।

Comments

संभव कैसे सही से शुरू करने के लिए एक पूर्ण दूरी के लिए पृष्ठभूमि की स्थिति सेट करने के लिए?

— cHao

सहायक हो सकता है: stackoverflow.com/questions/1736922/…

— jedierikb

आप इसे CSS3 के साथ कर सकते हैं - नीचे देखें

— ड्रूविजन

के संभावित डुप्लिकेट stackoverflow.com/questions/5142405/...

— वोल्कर ई

@ जोस्ट्स क्या यह संपादन वास्तव में अनिवार्य था?

— थॉमस अय्यूब

Answer 1

background-position: right 30px center;

यह ज्यादातर ब्राउज़र में काम करता है। देखें: पूरी सूची के लिए http://caniuse.com/#feat=css-background-offsets

अधिक जानकारी: http://www.w3.org/TR/css3-background/#the-background-position

Comments

"मुझे नहीं पता कि क्या यह वैध है" ... यह नहीं है। प्रश्न में संपत्ति के मूल्यों के लिए एक मानक आदेश है।

— एंड्रयू बार्बर

यह सीएसएस पृष्ठभूमि और सीमा 3 के अनुसार मान्य है, जो पहले से ही उम्मीदवार की सिफारिश है (कार्यान्वयन के लिए तैयार मानक): w3.org/TR/css3-background/#the-background-position

— Ilya Streltsyn

इसे "सही उत्तर" के रूप में चुना जाना चाहिए। एमडीएन के अनुसार यह IE9 + और अन्य सभी ब्राउज़रों में समर्थित है, जो बहुत अच्छा है! developer.mozilla.org/en-US/docs/Web/CSS/…

— 0,16 को

निश्चित नहीं है कि यह उत्तर के रूप में क्यों नहीं चुना गया है? यह वही है जो पूछा जाता है।

— क्रिस

क्रोम देव उपकरणों में यह कोशिश कर रहा है, और यह काम नहीं कर रहा है (वास्तव में अच्छी तरह से जांच नहीं की है ...)

— 1nfiniti

Answer 2

विशेषता borderको दाईं ओर से लंबाई के रूप में उपयोग करना संभव है

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

Comments

यह समाधान सफारी में बहुत काम करता है, लेकिन क्रोम, फ़ायरफ़ॉक्स या IE काम नहीं करता है।

— एंडी कुक

मेरे लिए एफएफ में काम करता है। और क्रोम। और IE 8 और 9. हालांकि 7 नहीं। उपयोगी हैक!

— ndtreviv

आदर्श नहीं जब आपका चयन बॉक्स पहले से ही एक सीमा के रूप में हो, अन्यथा बॉक्स के चारों ओर एक और div की आवश्यकता होगी

— मिगुएल

पृष्ठभूमि: url ('/ img.png') नो-रिपीट राइट 10 पीएक्स सेंटर; यह काम करेगा, मैं फ़ायरफ़ॉक्स में जाँच

— असद कामरान

Answer 3

एक तरीका है, लेकिन यह हर ब्राउज़र पर समर्थित नहीं है ( यहां कवरेज देखें )

element {
  background-position : calc(100% - 10px) 0;
}

यह हर आधुनिक ब्राउज़र में काम करता है, लेकिन यह संभव है कि IE9 दुर्घटनाग्रस्त हो । इसके अलावा के लिए कोई कवरेज = <IE8।

Comments

यह डिजाइन की बहुत सारी समस्याओं का वास्तव में शक्तिशाली समाधान है। ध्यान दें!

— डेवीडब

इसलिए यह वास्तव में नवीनतम क्रोम में भी काम नहीं करता है। जब मैं उस तत्व का निरीक्षण करता हूँ जो वास्तव में कहता है background-position-x: calc(90%);- अर्थात यह १००% से १०% घटाया गया है

— शमौन_ वीवर

@ValentinE जो मेरे लिए भी काम करता है :-) मैंने निश्चित रूप से इसे 90% में परिवर्तित देखा है - और मैंने इसे क्रोम से सीधे कट और पेस्ट किया था। जब तक क्रोम के एक देव निर्माण में एक अजीब बग नहीं था मुझे यकीन नहीं है कि क्यों

— शमौन_विस्तार

@ValentinE दोह! मैं यह समझ गया। मैं सीएसएस के लिए LESS का उपयोग कर रहा हूं और इसका अपना 'कैल्क' फंक्शन है जो पूर्वता लेता है। किसी और को इस समस्या को देखने के लिए: stackoverflow.com/questions/17904088/…

— Simon_Weaver

मैं यहां caniuse.com/#feat=calc देख रहा हूं कि यह वास्तव में IE9 को क्रैश कर सकता है - इसलिए यदि आप इस पर भरोसा कर रहे हैं, तो आप निश्चित रूप से IE9 में परीक्षण करना याद रखना चाहेंगे

— Simon_Weaver

Answer 4

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

• सुनिश्चित करें कि आपकी पृष्ठभूमि छवि कंटेनर के आकार से मेल खाती है (कम से कम चौड़ाई में) और सेट background-repeat: repeatया repeat-xयदि केवल चौड़ाई बराबर है। फिर, xदाईं ओर से कुछ दिखाई देने वाले पिक्सल्स सरल होते हैं background-position: -5px 0px।
• background-positionविशेष व्यवहार को प्रदर्शित करने के लिए प्रतिशत का उपयोग करना जो यहां वर्णित से बेहतर है। इसे आजमा कर देखें। अनिवार्य रूप से, background-position: 90% 50%कंटेनर के दाहिने किनारे से 10% दूर पृष्ठभूमि छवि रेखा के दाहिने किनारे को बनाएगा।
• छवि बना एक div बनाएँ। position: relativeयदि पहले से सेट नहीं है, तो स्पष्ट रूप से युक्त तत्व की स्थिति निर्धारित करें। position: absolute; right: 10px; top: 10px;जैसा कि आप फिट देखते हैं, स्पष्ट रूप से अंतिम दो को समायोजित करने के लिए छवि कंटेनर सेट करें । छवि डिव कंटेनर को युक्त तत्व में रखें।

Comments

सुझावों के लिए धन्यवाद! हाँ, मेरे पास अब यह w /% मान सेट है, लेकिन यह मेरे मामले में इतनी अच्छी तरह से काम नहीं करता है। जिन स्थानों पर यह bg छवि दिखाई जानी चाहिए वे ऐसे तत्वों पर हैं जो आकार में बहुत भिन्न होते हैं, इसलिए निश्चित रूप से दाईं ओर ऑफ़सेट राशि भी एक बहुत हत्या को बदलती है। वैसे भी, मैं कुछ hacky workaround के साथ जा रहा हूँ यकीन है, लेकिन यह मेरे लिए अजीब है यह कल्पना का हिस्सा नहीं है। काफी सरल लगता है, आप इसे ऊपर या बाएं से कर सकते हैं, नीचे या दाएं क्यों नहीं शुरू करें? वैसे भी, शायद css4 में, जो उस समय के आसपास के सभी प्रमुख ब्राउज़रों में ठीक से समर्थित होगा;)

— डग

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

— निको

Answer 5

इसे इस्तेमाल करे:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

ध्यान दें कि ऊपर दिया गया कोड संपूर्ण तत्व (केवल पृष्ठभूमि छवि नहीं) को दाईं ओर से 5px ले जाएगा। यह आपके मामले के लिए ठीक हो सकता है।

Answer 6

आप इसे CSS3 में कर सकते हैं:

background-position: right 20px bottom 20px;

यह फ़ायरफ़ॉक्स, क्रोम, IE9 + में काम करता है

स्रोत: एमडीएन

Answer 7

दाईं ओर मार्जिन के रूप में पारदर्शी पिक्सेल के साथ छवि वर्कअराउंड।

उसी के लिए छवि वर्कअराउंड PNG या GIF छवि (छवि फ़ाइल स्वरूप जो पारदर्शिता का समर्थन करता है) का निर्माण करने के लिए है, जिसमें छवि के दाईं ओर एक पारदर्शी भाग होता है, जो पिक्सेल के उस नंबर के बराबर होता है जिसे आप सही मार्जिन देना चाहते हैं। उदाहरण: 5px, 10px, आदि)

यह निश्चित चौड़ाई में और साथ ही प्रतिशत में चौड़ाई में लगातार काम करता है। हैडर के अधिकार पर प्लस / माइनस या अप / डाउन एरो इमेज वाले अकॉर्डियन हेडर के लिए व्यावहारिक रूप से एक अच्छा समाधान!

नकारात्मक पक्ष: दुर्भाग्य से, आप JPG का उपयोग नहीं कर सकते जब तक कि कंटेनर का बैकग्राउंड भाग और CSS पृष्ठभूमि छवि का बैकग्राउंड एक ही फ्लैट रंग (एक ग्रेडिएंट / विगनेट के साथ) का न हो, ज्यादातर सफेद / काला आदि।

Comments

मेरे लिए यह एकमात्र समाधान था जो सभी ब्राउज़रों पर काम करता था।

— मैथ्यू नेपोली

Answer 8

यदि आप आधुनिक ब्राउज़रों के इन दिनों में इस विषय पर ठोकर खाते हैं, तो आप छद्म श्रेणी का उपयोग कर सकते हैं: पृष्ठभूमि के साथ व्यावहारिक रूप से कुछ भी करने के बाद।

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

यह सीएसएस बैकग्राउंड को ".container" एलिमेंट के निचले कोने पर 20px स्पेस के साथ दाईं ओर रखेगा।

उदाहरण के लिए इस पहेली को देखें http://jsfiddle.net/h6K9z/226/

Comments

मुझे पसंद है कि आप कहाँ जा रहे हैं लेकिन यह: के बाद वास्तव में एक वर्ग की तुलना में एक psuedo तत्व अधिक है। स्पष्टीकरण प्रयोजनों के लिए

— vmex151

ठीक है लेकिन <IE 8

— मिगुएल

@ मिग्युएल को अब वहां काम करने की कोई आवश्यकता नहीं है ;-) डिज़ाइन को उन लोगों के लिए जितना संभव हो उतना बदसूरत दिखने दें जो अभी भी IE 8 से पुराने संस्करणों का उपयोग करते हैं! (.. जब तक वेबसाइट अभी भी सुलभ है ..)

— जेम्स कैजेट्टा

Answer 9

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

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+ */

Comments

-वेबकिट-कैल्क मेरी सफारी को शून्य पछतावा के साथ दुर्घटनाग्रस्त करता है। OSX 10.8.5 / सफारी 6.0.5

— स्क्वायरकट

Answer 10

बस पिक्सेल गद्दी को छवि में रखें - फ़ोटोशॉप में छवि के कैनवास आकार में 10px या जो भी जोड़ें और इसे सीएसएस में ठीक से संरेखित करें।

Answer 11

मैं टेबल हेडर के दाईं ओर हमेशा एक ड्रॉपडाउन तीर प्राप्त करने के लिए एक समान कार्य करने की कोशिश कर रहा था और इसके साथ आया था जो क्रोम और फ़ायरफ़ॉक्स में काम करता था, लेकिन सफारी मुझे बता रही थी कि यह एक अवैध संपत्ति थी।

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

इंस्पेक्टर में थोड़ी गड़बड़ करने के बाद, मैं इस क्रॉस-ब्राउज़र समाधान के साथ आया, जो IE8 +, क्रोम, फ़ायरफ़ॉक्स और सफारी में काम करता है, साथ ही साथ उत्तरदायी डिज़ाइन भी।

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

यहां बताया गया है कि यह कैसा दिखता है और कैसे काम करता है। कोडपेन SCSS के साथ लिखा गया है - http://cdpn.io/xqGbk

Comments

मैं आपको याद दिलाता हूं कि% की स्थापना भी कंटेनर की लंबाई के आधार पर इसे संरेखित करेगी, जो कि बड़े कंटेनर होने पर गड़बड़ हो सकती है

— मिगुएल

Answer 12

यदि आप केवल एक्स-अक्ष निर्दिष्ट करना चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

background-position-x: right 100px;

Comments

यह क्रोम 81.0.4044.138 में काम नहीं कर रहा है। यह अवैध संपत्ति मूल्य कह रहा है।

— Xandor

मैं इसके साथ काम करने में सक्षम था: background-position: right -100px center;ध्यान दें कि यदि आप y-positionइसे छोड़ देते हैं तो यह सही काम नहीं करता है क्योंकि यह सोचता है कि पिक्सेल क्या हैं।

— Xandor

Answer 13

एक अन्य समाधान जो मैंने नहीं देखा है वह छद्म तत्वों का उपयोग करना है और मुझे विश्वास है कि यह समाधान किसी भी सीएसएस 2.1 अनुरूप ब्राउज़र (browser IE8, 2 Safari 2, ...) के साथ काम करेगा और यह भी उत्तरदायी होना चाहिए:

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

उदाहरण : तत्व जैसे। एक वर्ग आकार 100px (सीमाओं पर विचार किए बिना) में 10px पैडिंग है और एक पृष्ठभूमि छवि को सही पैडिंग के अंदर दिखाया जाना चाहिए। इसका मतलब है कि छद्म तत्व एक 80px आकार का वर्ग है। हम इसे सही के साथ तत्व की दाईं सीमा पर चिपकाना चाहते हैं: -10px; । अगर हम बैकग्राउंड-इमेज को सही बॉर्डर से 5px दूर रखना चाहते हैं, तो हमें पॉजिट्यू -एलिमेंट को 5px पर राइट के तत्व के राइट बॉर्डर से दूर रखने की जरूरत है : -5px; ... अपने आत्म के लिए इसे यहाँ देखें: http://jsfiddle.net/yHucT/

Answer 14

यदि कंटेनर में एक निश्चित ऊँचाई है: ठीक से फिट होने तक प्रतिशत (पृष्ठभूमि-स्थिति) को ट्विक करें।

यदि कंटेनर में एक गतिशील ऊंचाई है: यदि आप अपनी पृष्ठभूमि और अपने कंटेनर के बीच एक पैडिंग चाहते हैं (जैसे कि कस्टम स्टाइल इनपुट, चयन), तो अपनी छवि में अपनी पैडिंग जोड़ें और पृष्ठभूमि की स्थिति को दाईं ओर या नीचे सेट करें।

मैं इस सवाल पर लड़खड़ा गया जब मैं अपने चयन के अधिकार से 5 px कहने के लिए एक चयनित बॉक्स के लिए पृष्ठभूमि प्राप्त करने की कोशिश कर रहा था। मेरे मामले में, मेरी पृष्ठभूमि एक तीर नीचे है जो मूल ड्रॉप डाउन आइकन को बदल देगा। मेरे मामले में, पृष्ठभूमि के लिए पैडिंग हमेशा (दाईं ओर से 5-10 पिक्सेल) समान रहेगी, इसलिए वास्तविक पृष्ठभूमि छवि को लाने के लिए यह एक आसान संशोधन है (इसके आयामों को दाईं ओर 5-10 पिक्सेल व्यापक बनाते हैं।

उम्मीद है की यह मदद करेगा!

Answer 15

आप अपनी पृष्ठभूमि छवि को एक संपादक में दाईं ओर से x पिक्सेल होने के लिए रख सकते हैं।

background: url(images_url) no-repeat right top;

बैकग्राउंड इमेज टॉप राईट में पोजिशन होगी, लेकिन राईट से x पिक्सल्स दिखाई देगी।

Comments

यह पीछे की ओर हो गया .. इसका क्षैतिज फिर ऊर्ध्वाधर

— रे

Answer 16

बाईं ओर से टीकिंग प्रतिशत मेरी पसंद के लिए थोड़ा भंगुर है। जब मुझे कुछ इस तरह की आवश्यकता होती है, तो मैं अपने कंटेनर स्टाइल को एक आवरण तत्व में जोड़ता हूं और फिर पृष्ठभूमि को आंतरिक तत्व के साथ लागू करता हूंbackground-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

.content-breakoutवर्ग वैकल्पिक है और अपनी सामग्री गद्दी में खाने के लिए यदि आवश्यक हो (नकारात्मक मार्जिन मूल्यों आवरण गद्दी में संगत मानों से मेल खाना चाहिए) की अनुमति देगा। यह थोड़ा वर्बोज़ है, लेकिन इसकी चौड़ाई और ऊंचाई की तुलना में छवि की सापेक्ष स्थिति के बारे में चिंतित होने के बिना मज़बूती से काम करता है।

Answer 17

यह सवाल पूछे जाने के बाद से ही इसके बारे में कहा जा रहा था, लेकिन मैं इस समस्या में भाग गया और मैंने इसे कर लिया:

background-position:95% 50%;

Comments

यह एक मेरे लिए बहुत अच्छी तरह से काम किया जब तक आप सही से सही पिक्सल की जरूरत नहीं है लेकिन एक अधिक तरल पदार्थ लेआउट।

— जेफ एस।

Answer 18

नकारात्मक मूल्यों का समाधान। छवि को स्थानांतरित करने के लिए पैडिंग-राइट समायोजित करें।

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

Answer 19

यह क्रोम 27 में काम करता है, मुझे नहीं पता कि यह वैध है या नहीं या अन्य ब्रोवर्स इसके साथ क्या करते हैं। मैं इस बारे में हैरान था।

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

Comments

यह मान्य नहीं है, क्रोम सिर्फ आपके लिए अच्छा था।

— 21

Answer 20

सभी वास्तविक ब्राउज़रों के लिए काम करता है (और IE9 + के लिए):

background-position: right 10px top 10px;

मैं इसका उपयोग RTL WordPress थीम्स के लिए करता हूं। उदाहरण देखें: अस्थायी वेबसाइट या वास्तविक वेबसाइट जल्द ही बन जाएगी। बड़े DIVs दाएं कोनों पर आइकन देखें।

Answer 21

सभी पृष्ठभूमि के लिए बेहतर: url ('../ छवियां / bg-menu-dropdown-top.png') ने छोड़ दिया 20px टॉप नो-रिपीट-महत्वपूर्ण!