Intereting Posts
Простая проблема с JavaScript: onClick подтверждает, что не предотвращает действие по умолчанию Свиток JQuery должен срабатывать чаще Очистка текстовой строки после получения текстового текста с помощью Beautifulsoup Не удается получить элемент body из ajax-ответа Преобразование символьных объектов в их уникодовые эквиваленты Может ли CSS действительно переопределить порядок элементов HTML на странице? Масштабирование планшета моей веб-страницы на 1,5 раза, что вызывает проблемы с макетом Flex, AngularJS + масонство, akoenig / угло-deckgrid и более Есть ли способ увеличить значение CSS в зависимости от переменной nth-child? в чем смысл windows Object и windows в javascript Ошибка JavaScript NaN в Internet Explorer Запуск JavaScript, загруженного с помощью XMLHttpRequest Перенос слов для кнопки с указанной шириной в ie7? Проблема междоменной iframe Вместо добавления другого элемента Он приземляется на другую страницу

background-position-y не работает в Firefox (через CSS)?

В моем коде background-position-y не работает. В Chrome это нормально, но не работает в Firefox.

У кого-нибудь есть решение?

Если ваша позиция-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; 

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

Почему бы вам не использовать фоновое положение напрямую?

Использование:

 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 … В зависимости от количества спрайтов, один или другой может быть лучшим выбором.

У моей есть точная проблема, о которой говорит Орабиг, у которой есть таблица, подобная спрайту с колоннами и строками.

Ниже приведено то, что я использовал в качестве обходного пути, используя 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'); } }); }