Ответ 1

Если ваша позиция-x равна 0, нет другого решения, кроме записи:

background-position: 0 100px;

background-position-x - это нестандартная реализация, исходящая из IE. Chrome сделал копию, но, к сожалению, не firefox...

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

Ответ 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;

Ответ 3

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

Ответ 4

background-position-y :10px; не работает в веб-браузере Firefox.

Вы должны следовать этому типу синтаксиса:

background-position: 10px 15px;

100% рабочий раствор

Ответ 5

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

Не будет работать, если вам нужен фон вместе с изображением. Поэтому используйте:

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

Ответ 6

Почему вы не используете background-position напрямую?

Применение:

background-position : 40% 56%;

Вместо:

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

Ответ 7

Это сработало для меня:

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

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

Ответ 8

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

Ответ 9

Убедитесь, что вы явно указали измерение своего смещения. Сегодня я столкнулся с этой точной проблемой, и это было связано с тем, как браузеры интерпретируют значения, которые вы предоставляете в своем CSS.

Например, это отлично работает в Chrome:

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

Но для Firefox и IE вам нужно написать:

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

Надеюсь, что это поможет.