Бацкгроунд-поситион - ЦСС-трикови

Anonim

background-positionИмовина у ЦСС-у вам омогућава да преместите позадинску слику (или нагиб) око у својој посуди.

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

Има три различите врсте вредности:

  • Вредности дужине (нпр. 100px 5px)
  • Проценти (нпр. 100% 5%)
  • Кључне речи (нпр. top right)

Подразумеване вредности су 0 0. Ово поставља вашу позадинску слику у горњи леви део контејнера.

Вредности дужине су прилично једноставне: прва вредност је хоризонтални положај, друга вредност је вертикални положај. Тако 100px 5pxће се слика померити за 100 пиксела удесно и за пет пиксела надоле. Вредности дужине можете да поставите у px, emили било којој другој ЦСС вредности дужине.

Проценти делују мало другачије. Извадите математичке капе: померање слике у позадини за Кс% значи да ће поравнати тачку Кс% на слици са тачком Кс% у контејнеру. На пример, 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скупа са јединицама дужине, процентима и кључним речима.

Погледајте вредности положаја оловке у позадини помоћу ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.

Декларисање вредности

Можете дати 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 оловке од стране ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.

Повезан

  • позадина-прилог
  • позадина-исечак
  • боја позадине
  • позадинска слика
  • позадина-порекло
  • позадина-понављање
  • величина позадине

Више ресурса

  • background-position у спецификацији ЦСС3
  • background-position на МДН
  • Офсет позадинске слике

Подршка прегледача

Основне вредности су подржане свуда. Синтакса са четири вредности има ову подршку:

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
25 13 9 12 7

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 4.4 7.0-7.1

То је исти ниво подршке као background-position-xи background-position-yсвојства.