Фон-позиция - CSS-трикове

Anonim

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

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

Той има три различни типа стойности:

  • Стойности на дължината (напр. 100px 5px)
  • Проценти (напр. 100% 5%)
  • Ключови думи (напр. top right)

Стойностите по подразбиране са 0 0. Това поставя фоновото ви изображение в горния ляв ъгъл на контейнера.

Стойностите на дължината са доста прости: първата стойност е хоризонталната позиция, втората стойност е вертикалната позиция. Така 100px 5pxще преместите изображението със 100px надясно и пет пиксела надолу. Може да зададете стойности за дължина на 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набор с мерни единици, проценти и ключови думи.

Вижте стойностите на позицията на фона на Pen от CSS-Tricks (@ css-tricks) на CodePen.

Деклариране на стойности

Можете да дадете background-positionдо четири стойности в съвременните браузъри (за подробности вижте таблицата за поддръжка на браузъри).

Ако декларирате една стойност , тази стойност е хоризонталното отместване. Браузърът задава вертикалното отместване на center.

Когато декларирате две стойности , първата стойност е хоризонталното отместване, а втората стойност е вертикалното отместване.

Нещата стават малко по-сложни, когато започнете да използвате три или четири стойности, но получавате и по-голям контрол върху разположението във фона.

Синтаксисът с три или четири стойности се редува между ключови думи и дължини или процентни единици. Можете да използвате всяка от стойностите на ключовите думи, освен centerв background-positionдекларация с три или четири стойности .

Когато посочите три стойности , браузърът заменя „липсващата“ четвърта стойност като 0. Ето пример за три стойности background-position:

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

Това позиционира фоновото изображение 45px отдясно и 0px от дъното на контейнера.

Ето пример за четири стойности background-position :

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

Това поставя фоновото изображение 45px отдясно и 20px от дъното на контейнера.

Обърнете внимание на реда на стойностите в примерите по-горе: ключови думи, последвани от мерни единици. Три или четири стойности 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свойствата.