পটভূমি-অবস্থান-y ফায়ারফক্সে কাজ করে না (সিএসএসের মাধ্যমে)?

Question

আমার কোডে background-position-yকাজ করে না। ক্রোমে এটি ঠিক আছে তবে ফায়ারফক্সে কাজ করছে না।

কারও কোন সমাধান আছে?

Comments

সবাইকে সুখবর! ফায়ারফক্স 49-এ দেখে মনে হচ্ছে background-position-xএবং -yসমর্থন করা হবে: developer.mozilla.org/en-US/docs/Web/CSS/…

— স্পিনহক্সিক্স

Answer 1

যদি আপনার অবস্থান-এক্স 0 হয় তবে লেখার বাইরে আর কোনও সমাধান নেই:

background-position: 0 100px;

ব্যাকগ্রাউন্ড-পজিশন-এক্স হল একটি মানহীন বাস্তবায়ন from ক্রোম এটি অনুলিপি করেছে, তবে দুর্ভাগ্যক্রমে ফায়ারফক্স নয় ...

তবে এই সমাধানটি সঠিক নাও হতে পারে যদি আপনার বড় পটভূমিতে পৃথক স্প্রাইট থাকে, সারি এবং কলস অর্থ বিভিন্ন জিনিস ... (উদাহরণস্বরূপ প্রতিটি সারিতে বিভিন্ন লোগো, ডানদিকে নির্বাচিত / বাম দিকে সরানো) সেই ক্ষেত্রে, আমি বড় ছবি আলাদা ইমেজে আলাদা করতে বা সিএসএসে বিভিন্ন সংমিশ্রণ লিখতে পরামর্শ দিই ... স্প্রাইটের সংখ্যার উপর নির্ভর করে এক বা অন্যটি সেরা পছন্দ হতে পারে।

Comments

ধন্যবাদ, দুর্দান্ত ধরা আমি মাত্র গিয়েছিলাম এবং আমার -x এবং -y এর ব্যবহারগুলি সরিয়েছি যাতে আমি মানদণ্ডের সাথে সঙ্গতিপূর্ণ। :)

— কেনি ওয়াইল্যান্ড 20

বরাবরই এফএফের সাথে ... আরও অবাক

— ম্লাদেন জঞ্জেটোভিচ

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-এর সমর্থনে older 31 পর্যন্ত পুরানো সংস্করণগুলির জন্য, আপনি সিএসএস ভেরিয়েবলগুলি ব্যবহার করতে background-position-xবা একই জাতীয় অক্ষের পটভূমিতে অবস্থান অর্জন করতে পারেন background-position-y। সিএসএস ভেরিয়েবলগুলি ২০১৫ সালের ডিসেম্বরে প্রার্থী প্রস্তাবের স্থিতিতে পৌঁছেছে ।

নীচে হওভারের স্প্রাইট চিত্রগুলির জন্য ব্যাকগ্রাউন্ড পজিশন অক্ষগুলি সংশোধন করার সম্পূর্ণ ক্রস ব্রাউজার উদাহরণ:

: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

সবেমাত্র লক্ষ্য করা গেছে - সিএসএসের চলকগুলি সিআর এর পথে চলছে । শীতলও।

— বোল্টক্লক

হ্যালো 2016! তবুও কোনও প্রয়োগ হচ্ছে না ...: \

— hetেটিসোয়াক

Answer 4

background-position-y :10px;হয় কাজ করছে না ফায়ারফক্স ওয়েব ব্রাউজারে।

আপনার এই ধরণের সিনট্যাক্সটি অনুসরণ করা উচিত:

background-position: 10px 15px;

10px "অবস্থান-এক্স" এবং 15px "পজিশন-ওয়াই" তে আবদ্ধ

100% ওয়ার্কিং সলিউশন

আরও উদাহরণের জন্য এই ইউআরএল অনুসরণ করুন

Comments

এটি ff v। 38 এ কাজ করে। সঠিক সমাধান হিসাবে চিহ্নিত করা উচিত। এটি ঠিক কী পরে প্রশ্নটি অর্জন করেছে

— এমকেবে

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;

তবে, ফায়ারফক্স এবং আইইয়ের জন্য আপনাকে এগুলি লিখতে হবে:

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

আশাকরি এটা সাহায্য করবে.

Answer 9

তবে এই সমাধানটি সঠিক নাও হতে পারে যদি আপনার বড় পটভূমিতে পৃথক স্প্রাইট থাকে, সারি এবং কলস অর্থ বিভিন্ন জিনিস ... (উদাহরণস্বরূপ প্রতিটি সারিতে বিভিন্ন লোগো, ডানদিকে নির্বাচিত / বাম দিকে সরানো) সেই ক্ষেত্রে, আমি বড় ছবি আলাদা ইমেজে আলাদা করতে বা সিএসএসে বিভিন্ন সংমিশ্রণ লিখতে পরামর্শ দিই ... স্প্রাইটের সংখ্যার উপর নির্ভর করে এক বা অন্যটি সেরা পছন্দ হতে পারে।

মাইনে ওরাবাগের বক্তব্য অনুসারে হুবহু সমস্যা রয়েছে যার স্প্রাইটের মতো একটি টেবিল রয়েছে যার কলাম এবং সারি রয়েছে।

নীচে আমি জেএস ব্যবহার করে কাজের মতো ব্যবহার করেছি

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');   
    }
  });      
}