HTML/CSS фоновая позиция | Блог Electric Toolbox
Главная / HTML/CSS background-position
Положение фона HTML/CSS можно задать с помощью пикселей, % и констант top, center, bottom для вертикального позиционирования и left, center, right для горизонтального позиционирования. В этом посте рассматривается порядок, в котором они должны быть, и «подводная лодка», которая может застать вас врасплох при переходе от констант к пикселям.
background-position
Порядок background-position должен быть горизонтальным, за которым следует вертикальное положение, например:
background-position: слева|в центре|справа вверху|в центре|внизу;
Можно использовать константы, пиксели и/или проценты, и они всегда должны располагаться в следующем порядке: по горизонтали и по вертикали. Однако на практике, когда используются константы, браузеры, кажется, принимают порядок в любом случае.
background
И, конечно же, позиция фона также может быть установлена как часть комбинированного объявления фона, например:
background: url(/images/red.png) right center no-repeat;
png) right center no-repeat; И снова часть положения должна быть горизонтальной, а затем вертикальной.
Примеры
В следующих примерах показан красный фон размером 50 пикселей, который не повторяется. Каждый снимок экрана имеет меньшее окно Firefox, расположенное поверх большего окна Chrome.
Текущие версии Firefox и IE не толерантны к порядку (то есть он должен быть горизонтальным, а затем вертикальным) при смешивании констант с размерами в пикселях, но Chrome и более старые браузеры (например, IE8 в режиме совместимости, IE<8) допустимы. более терпимым, как показано ниже.
Пример — background-position: top center
В первом примере показан пример использования констант в неправильном порядке. Они правильно отображаются как в Chrome, так и в FF, т.е. в центре окна по горизонтали и вверху.
Пример — background-position: center top
Второй пример отображает то же, что и первый пример, но содержит константы в правильном порядке.
Пример — background-position: 50px слева
Это первый пример, который не будет отображаться так, как можно было бы ожидать, и это потому, что порядок недействителен: у нас есть горизонтальное ключевое слово, где ожидается вертикальная константа или значение.
Как вы можете видеть на снимке экрана ниже, он отображается так, как мы могли бы ожидать в Chrome (и в других браузерах, о которых я упоминал ранее), но не в Firefox, где он по-прежнему находится вверху слева.
Пример — background-position: left 50px
Теперь вот предыдущий пример в правильном направлении с горизонтальной константой впереди. Теперь он отображается так, как ожидалось, в обоих браузерах.
Пример — background-position: top 50px vs 50px top
Следующие два примера аналогичны предыдущим двум, но иллюстрируют проблему, когда вертикальная константа помещается в горизонтальное положение, а значение — в другое. Первый не будет правильно отображаться в FF, а второй (в правильном порядке) будет.
Пример — background-position: 100px 50px
И последний пример просто показывает горизонтальную позицию фона 100px с позицией фона 50px, чтобы проиллюстрировать порядок.
Заключение и «повод»
Я часто вижу примеры CSS в Интернете, где вы видите что-то вроде «положение фона: вверху слева», что заставляет людей думать, что правильный порядок — вертикальный, а затем горизонтальный. Я сам много раз попадал в эту ловушку, и только когда мне случается смотреть на макет в Firefox, я понимаю, что что-то не так.
Суть в том, что вы начинаете с «background-position: top left», а затем переходите к изменению, например. «left» на что-то вроде «50px», только позиция фона теперь смещается так в некоторых браузерах, а не в других. В зависимости от того, с каким браузером вы работаете, вы можете не заметить, что это проблема, пока позже.
Таким образом, вывод этого поста заключается в том, чтобы убедиться, что вы всегда ставите горизонтальное положение на первое место, а вертикальное — на второе.