Фонова позиція - CSS-хитрощі

Anonim

background-positionВластивість в CSS дозволяє переміщати фонове зображення (або градієнт) навколо всередині контейнера.

html ( background-position: 100px 5px; )

Він має три різні типи значень:

  • Значення довжини (наприклад 100px 5px)
  • Відсотки (наприклад 100% 5%)
  • Ключові слова (наприклад top right)

Значення за замовчуванням - 0 0. Це розміщує фонове зображення у верхньому лівому куті контейнера.

Значення довжини досить прості: перше значення - горизонтальне положення, друге - вертикальне положення. Так 100px 5pxбуде переміщено зображення на 100 пікселів праворуч і на п’ять пікселів вниз. Ви можете встановити значення довжини в px, emабо будь-якому іншому значенні довжини CSS.

Відсотки працюють трохи інакше. Дістаньте математичні капелюхи: якщо перемістити фонове зображення на X%, це означає, що точка X% на зображенні буде вирівняна до точки X% у контейнері. Наприклад, 50%означає, що він вирівняє середину зображення із серединою контейнера. 100%означає, що він вирівняє останній піксель зображення з останнім пікселем контейнера тощо.

Ключові слова - це просто ярлики для відсотків. Запам’ятовувати та писати простіше, top rightніж 100% 0, і тому ключові слова - це річ. Ось список усіх п’яти ключових слів та їх еквівалентні значення:

  • top: 0% по вертикалі
  • right: 100% по горизонталі
  • bottom: 100% по вертикалі
  • left: 0% по горизонталі
  • center: 50% по горизонталі, якщо горизонталь ще не визначена. Якщо це так, це застосовується вертикально.

Цікаво відзначити, що не має значення, який порядок ви використовуєте для ключових слів: top centerтакий самий, як center top. Ви можете зробити це, лише якщо ви використовуєте виключно ключові слова. center 10%не те саме, що 10% center.

Демо

Ця демонстрація демонструє приклади background-positionнабору з одиницями довжини, відсотками та ключовими словами.

Перегляньте значення положення фону в ручці за допомогою CSS-Tricks (@ css-tricks) на CodePen.

Декларування цінностей

Ви можете вказати background-positionдо чотирьох значень у сучасних браузерах (детальніше див. Таблицю підтримки браузера).

Якщо ви оголосите одне значення , це значення є горизонтальним зміщенням. Браузер встановлює вертикальний зсув на center.

Коли ви оголошуєте два значення , перше значення - це горизонтальне зміщення, а друге значення - вертикальне зміщення.

Усе стає трохи складніше, коли ви починаєте використовувати три-чотири значення, але ви також отримуєте більше контролю над фоновим розташуванням.

Синтаксис із трьох або чотирьох значень чергується між ключовими словами та одиницями довжини чи відсотка. Ви можете використовувати будь-яке зі значень ключових слів, крім декларації centerз трьома або чотирма значеннями background-position.

Коли ви вказуєте три значення , браузер перетинає "відсутнє" четверте значення як 0. Ось приклад трьох значень background-position:

#threevalues ( background-position: right 45px bottom; )

Це розміщує фонове зображення 45 пікселів праворуч та 0 пікселів знизу контейнера.

Ось приклад чотиризначного значення background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Це додає фонове зображення 45 пікселів праворуч і 20 пікселів знизу контейнера.

Зверніть увагу на порядок значень у наведених вище прикладах: ключові слова, після яких - одиниці довжини. Три або чотири значення background-positionповинні відповідати цьому формату, а ключове слово має одиницю довжини або відсотка.

Демо

Ця демонстрація включає приклади одного значення, двох значень, трьох значень та чотирьох значень background-position.

Див. Синтаксис значень фонової позиції 1, 2, 3 та 4 Pen за допомогою CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані

  • фон-вкладення
  • фоновий кліп
  • Колір фону
  • фонове зображення
  • фон-походження
  • фоновий повтор
  • розмір фону

Більше ресурсів

  • background-position у специфікації CSS3
  • background-position на MDN
  • Зміщення фонових зображень

Підтримка браузера

Базові значення підтримуються скрізь. Синтаксис із чотирьох значень має таку підтримку:

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
25 13 9 12 7

Мобільний / планшетний

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7,0-7,1

Це такий же рівень підтримки, як background-position-xі background-position-yвластивості.