У моєму коді background-position-yце не працює. У Chrome це нормально, але у Firefox не працює.

У когось є якесь рішення?

Якщо ваше position-x дорівнює 0, немає іншого рішення, окрім написання:

background-position: 0 100px;

background-position-x - це нестандартна реалізація, що надходить від IE. Chrome дійсно скопіював його, але, на жаль, не Firefox ...

Однак це рішення може бути не ідеальним, якщо у вас є окремі спрайти на великому фоні, з рядками та стовпцями, що означають різні речі ... (наприклад, різні логотипи в кожному рядку, виділені / наведені праворуч, звичайні ліві) У такому випадку, Я б запропонував відокремити велике зображення на окремих зображеннях або записати різні комбінації в CSS ... Залежно від кількості спрайтів, найкращим вибором може бути той чи інший.

Використовуй це

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;

Firefox 49 буде випущений - із підтримкою - background-position-[xy]у вересні 2016 року. Для старих версій до 31 ви можете використовувати змінні CSS, щоб досягти розташування фону на одній осі, подібно до використання background-position-xабо background-position-y. Змінні CSS досягли статусу Рекомендації щодо кандидатів у грудні 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;  }

background-position-y :10px;це не працює в веб - браузері Firefox.

Вам слід дотримуватися цього типу синтаксису:

background-position: 10px 15px;

10 пікс обмежується "position-x", а 15px обмежується "position-y"

100% робоче рішення

Перейдіть за цією URL-адресою, щоб побачити більше прикладів

Чому б вам не використовувати безпосередньо фонове положення ?

Використання:

background-position : 40% 56%;

Замість:

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

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

Не буде працювати, якщо вам потрібен фон разом із зображенням. Тому використовуйте:

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

Це працювало для мене:

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

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

Переконайтеся, що ви чітко заявляєте вимірювання вашого зсуву. Я зіткнувся з цією точною проблемою сьогодні, і це було пов’язано з тим, як браузери інтерпретують значення, які ви надаєте у своєму CSS.

Наприклад, це чудово працює в Chrome:

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

Але для Firefox та IE потрібно написати:

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

Сподіваюся, це допомагає.

Однак це рішення може бути не ідеальним, якщо у вас є окремі спрайти на великому фоні, з рядками та стовпчиками, що означають різні речі ... (наприклад, різні логотипи на кожному рядку, виділені / наведені праворуч, звичайні ліві) У такому випадку, Я б запропонував відокремити велике зображення на окремих зображеннях або записати різні комбінації в 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');   
    }
  });      
}