Если ваша позиция-x равна 0, нет другого решения, кроме как написать:
background-position: 0100px;
background-position-x - нестандартная реализация из IE. Chrome скопировал его, но, к сожалению, не firefox ...
Однако это решение может быть не идеальным, если у вас есть отдельные спрайты на большом фоне, где строки и столбцы означают разные вещи ... (например, разные логотипы в каждой строке, выбранные / зависшие справа, простые слева) В этом случае, Я бы посоветовал разделить большую картинку на отдельные изображения или написать различные комбинации в CSS ... В зависимости от количества спрайтов, один или другой может быть лучшим выбором.
забавно, что firefox не поддерживает разметку «Вместо», но да, это работает .. ty;)
Адриан
16
Firefox 49 будет выпущен - с поддержкой background-position-[xy]- в сентябре 2016 года. Для более старых версий до 31 вы можете использовать переменные CSS для позиционирования фона на одной оси, аналогично использованию background-position-xили background-position-y. Переменные CSS получили статус кандидата в рекомендации в декабре 2015 года .
Ниже приведен полностью кроссбраузерный пример изменения осей положения фона для изображений спрайтов при наведении курсора:
Прошёл почти год в подвешенном состоянии, и Firefox по-прежнему оставался единственной реализацией. Плохой знак.
BoltClock
1
@BoltClock: он находится на рассмотрении Microsoft, за ним проголосовало несколько человек, и разработка Chrome только что (повторно) началась . Однако для этого конкретного случая использования переменные CSS могут использоваться сегодня, поскольку единственный браузер, который их реализует, - единственный, которому они нужны для имитации background-position-x / y.
Убедитесь, что вы явно указали размер вашего смещения. Сегодня я столкнулся именно с этой проблемой, и это было связано с тем, как браузеры интерпретируют значения, которые вы указываете в своем CSS.
Однако это решение может быть не идеальным, если у вас есть отдельные спрайты на большом фоне, где строки и столбцы означают разные вещи ... (например, разные логотипы в каждой строке, выбранные / зависшие справа, простые слева) В этом случае, Я бы посоветовал разделить большую картинку на отдельные изображения или написать различные комбинации в CSS ... В зависимости от количества спрайтов, один или другой может быть лучшим выбором.
У меня есть точная проблема, как указано Orabîg, у которого есть таблица, подобная спрайту, которая имеет столбцы и строки.
Ниже показано, что я использовал в качестве обходного пути с помощью js
background-position-x
и-y
будет поддерживаться в Firefox 49: developer.mozilla.org/en-US/docs/Web/CSS/…Ответы:
Если ваша позиция-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: 10px 15px;
10px ограничено до "position-x" и 15px ограничено до "position-y"
100% рабочее решение
Перейдите по этому URL-адресу, чтобы увидеть больше примеров
источник
Почему бы вам напрямую не использовать background-position ?
Использование:
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;
Надеюсь это поможет.
источник
У меня есть точная проблема, как указано 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'); } }); }
источник