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

84

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

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

Марлос Кармо
источник
Всем хорошие новости! Похоже, что background-position-xи -yбудет поддерживаться в Firefox 49: developer.mozilla.org/en-US/docs/Web/CSS/…
Sphinxxx

Ответы:

120

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

background-position: 0 100px;

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

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

Орабиг
источник
Спасибо, отличный улов. Я просто пошел и удалил использование -x и -y, чтобы соответствовать стандартам. :)
Kenny Wyland
Как всегда с FF ... wierd
Mladen Janjetovic
19

Использовать этот

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 не поддерживает разметку «Вместо», но да, это работает .. ty;)
Адриан
16

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;  }
Энди Э
источник
Прошёл почти год в подвешенном состоянии, и Firefox по-прежнему оставался единственной реализацией. Плохой знак.
BoltClock
1
@BoltClock: он находится на рассмотрении Microsoft, за ним проголосовало несколько человек, и разработка Chrome только что (повторно) началась . Однако для этого конкретного случая использования переменные CSS могут использоваться сегодня, поскольку единственный браузер, который их реализует, - единственный, которому они нужны для имитации background-position-x / y.
Andy E
Круто! Думаю, лучше поздно, чем никогда :)
BoltClock
2
Только что заметил - CSS Variables находится на пути к CR . Тоже круто.
BoltClock
привет 2016! до сих пор нет реализации ...: \
ghettosoak
15

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

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

background-position: 10px 15px;

10px ограничено до "position-x" и 15px ограничено до "position-y"

100% рабочее решение

Перейдите по этому URL-адресу, чтобы увидеть больше примеров

Ишан
источник
Это работает в ff v. 38. Следует отметить как правильное решение. Он достигает именно того, о чем идет речь
Mcabe
3

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

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

background-position : 40% 56%;

Вместо:

background-position-x : 40%;
background-position-y : 56%
Сандип Гантаит
источник
3
background: url("path") 89px 78px no-repeat;

Не сработает, если вам нужен фон вместе с изображением. Так что используйте:

background: orange url("path-to-image.png") 89px 78px no-repeat;
Петр Срудка
источник
1

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

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

a:hover {
    background-position: 0 -78px;
    background-repeat: no-repeat;
}
Стефан
источник
0

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

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

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

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

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

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

Майк Заварелло
источник
0

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