पृष्ठभूमि-स्थिति-y फ़ायरफ़ॉक्स (सीएसएस के माध्यम से) में काम नहीं करता है?

Question

मेरे कोड में background-position-yकाम नहीं करता है। क्रोम में यह ठीक है, लेकिन फ़ायरफ़ॉक्स में काम नहीं कर रहा है।

किसी के पास कोई उपाय है?

Comments

सबके लिए अच्छी खबर है! लगता है background-position-xऔर -yफ़ायरफ़ॉक्स 49 में समर्थित किया जाएगा: developer.mozilla.org/en-US/docs/Web/CSS/…

— Sphinxxx

Answer 1

यदि आपकी स्थिति- x 0 है, तो लेखन के अलावा और कोई उपाय नहीं है:

background-position: 0 100px;

पृष्ठभूमि-स्थिति-एक्स IE से आने वाला एक गैर-मानक कार्यान्वयन है। Chrome ने इसकी प्रतिलिपि बनाई, लेकिन दुख की बात है कि फ़ायरफ़ॉक्स नहीं ...

हालाँकि यह समाधान सही नहीं हो सकता है यदि आपके पास एक बड़ी पृष्ठभूमि पर अलग-अलग स्प्राइट्स हैं, पंक्तियों और कॉलस के साथ अलग-अलग अर्थ हैं ... (उदाहरण के लिए प्रत्येक पंक्ति पर अलग-अलग लोगो, दाएं पर चयनित / होवर, बाईं ओर सादे), उस स्थिति में, मैं अलग-अलग चित्रों में बड़ी तस्वीर को अलग करने का सुझाव दूंगा, या CSS में विभिन्न संयोजनों को लिखूंगा ... स्प्राइट की संख्या के आधार पर, एक या दूसरा सबसे अच्छा विकल्प हो सकता है।

Comments

धन्यवाद, शानदार कैच। मैं बस चला गया और अपने -x और -y के उपयोग को हटा दिया ताकि मैं मानकों का अनुपालन करूं। :)

— केनी वायलैंड

हमेशा की तरह FF के साथ ...

— wierd

Answer 2

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

background: url("path-to-url.png") 89px 78px no-repeat;

इसके अलावा

background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;

Comments

); हास्यास्पद है कि फ़ायरफ़ॉक्स का समर्थन नहीं करता "इसके बजाय" मार्कअप है, लेकिन हाँ, यह काम करता है .. Ty

— एड्रियन

Answer 3

फ़ायरफ़ॉक्स 49 जारी किया जाएगा के लिए समर्थन -साथ background-position-[xy]सितंबर 2016 -इन पुराने संस्करणों 31 अप करने के लिए, आप उपयोग कर सकते हैं के लिए सीएसएस चर पृष्ठभूमि स्थिति उपयोग करने के समान एक धुरी पर प्राप्त करने के लिए background-position-xया background-position-y। सीएसएस चर दिसंबर 2015 में उम्मीदवार की सिफारिश की स्थिति तक पहुंच गए ।

होवर पर स्प्राइट छवियों के लिए पृष्ठभूमि स्थिति अक्षों को संशोधित करने का एक पूर्णतया क्रॉस-ब्राउज़र उदाहरण निम्नलिखित है:

:root {
    --bgX: 0px;
    --bgY: 0px;
}

a {
    background-position: 0px 0px;
    background-position: var(--bgX) var(--bgY);
}

a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active   { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px;  }
a.gplus    { background-position-y: -40px; --bgY: -40px;  }

Comments

यह लगभग एक वर्ष में सीमित हो गया है, फ़ायरफ़ॉक्स अभी भी एकमात्र कार्यान्वयन है। अच्छा संकेत नहीं।

— BoltClock

@BoltClock: यह Microsoft के विचाराधीन है, इसके पीछे कुछ वोटों के साथ, और क्रोम के लिए सिर्फ (पुनः) विकास शुरू हुआ । हालाँकि, इस विशेष उपयोग के मामले के लिए, सीएसएस चर को आज नियोजित किया जा सकता है, क्योंकि एकमात्र ब्राउज़र जो उन्हें लागू करता है वह केवल एक ही है जो उन्हें पृष्ठभूमि-स्थिति-एक्स / वाई का अनुकरण करने की आवश्यकता है।

— एंडी ई

ठंडा! बेहतर देर से कभी नहीं की तुलना में मुझे लगता है कि :)

— BoltClock

बस देखा - सीएसएस चर चर सीआर के लिए अपने रास्ते पर है । साथ ही ठंडी भी।

— BoltClock

हैलो 2016! अभी भी कोई कार्यान्वयन नहीं ...: \

— यहूदी बस्ती

Answer 4

background-position-y :10px;है काम नहीं कर रहा Firefox वेब ब्राउज़र में।

आपको इस प्रकार के सिंटैक्स का पालन करना चाहिए:

background-position: 10px 15px;

10px "स्थिति-x" और 15px "स्थिति-y" से घिरा है।

100% काम कर समाधान

अधिक उदाहरणों के लिए इस URL का अनुसरण करें

Comments

यह ff v। 38 में काम करता है। इसे सही समाधान के रूप में चिह्नित किया जाना चाहिए। यह वास्तव में क्या प्रश्न के बाद प्राप्त होता है

— mcabe

Answer 5

आप सीधे पृष्ठभूमि-स्थिति का उपयोग क्यों नहीं करते ?

उपयोग:

background-position : 40% 56%;

के बजाय:

background-position-x : 40%;
background-position-y : 56%

Answer 6

background: url("path") 89px 78px no-repeat;

यदि आप छवि के साथ-साथ पृष्ठभूमि चाहते हैं तो काम नहीं करेगा। तो उपयोग करें:

background: orange url("path-to-image.png") 89px 78px no-repeat;

Answer 7

यह मेरे लिए काम किया:

a {
    background-image: url(/image.jpg);
    width: 228px;
    height: 78px;
    display: inline-block;
}

a:hover {
    background-position: 0 -78px;
    background-repeat: no-repeat;
}

Answer 8

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

उदाहरण के लिए, यह क्रोम में पूरी तरह से काम करता है:

background: url("my-image.png") 100 100 no-repeat;

लेकिन, फ़ायरफ़ॉक्स और IE के लिए, आपको लिखना होगा:

background: url("my-image.png") 100px 100px no-repeat;

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

Answer 9

हालाँकि यह समाधान सही नहीं हो सकता है यदि आपके पास एक बड़ी पृष्ठभूमि पर अलग-अलग स्प्राइट्स हैं, पंक्तियों और कॉलस के साथ अलग-अलग अर्थ हैं ... (उदाहरण के लिए प्रत्येक पंक्ति पर अलग-अलग लोगो, दाएं पर चयनित / होवर, बाईं ओर सादे), उस स्थिति में, मैं अलग-अलग चित्रों में बड़ी तस्वीर को अलग करने का सुझाव दूंगा, या CSS में विभिन्न संयोजनों को लिखूंगा ... स्प्राइट की संख्या के आधार पर, एक या दूसरा सबसे अच्छा विकल्प हो सकता है।

मेरे पास सटीक समस्या है जैसा कि Orabîg द्वारा बताया गया है जिसमें स्प्राइट जैसी एक मेज है जिसमें कॉलम और पंक्तियाँ हैं।

नीचे मैंने js का उपयोग करके वर्कअराउंड के रूप में उपयोग किया है

firefoxFixBackgroundposition:function(){
  $('.circle').on({
    mouseenter: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');   
    },
    mouseleave: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');   
    }
  });      
}