Tła

Każde pole CSS jest obsługiwane przez specjalną warstwę o nazwie warstwa tła. CSS oferuje wiele sposobów na wprowadzenie istotnych zmian, w tym umożliwia dodanie wielu tła.

Warstwy tła znajdują się najdalej od użytkownika i są renderowane za zawartością pola, zaczynając od regionu padding-box. Dzięki temu warstwa tła nie będzie w ogóle zachodzić na krawędzie.

Kolor tła

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Jednym z najprostszych efektów, które możesz zastosować do warstwy tła, jest ustawienie kolor. Wartość początkowa background-color to transparent, co pozwala na wyświetlanie zawartości rodzica. Prawidłowy kolor ustawiony na warstwie tła znajduje się za innymi elementami na tym elemencie.

Obrazy tła

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Do warstwy background-color możesz dodać obraz tła za pomocą właściwości background-image. background-image akceptuje te elementy:

  • Adres URL obrazu lub identyfikator URI danych za pomocą funkcji CSS url.
  • Obraz dynamicznie tworzony przez funkcję gradientu CSS.

Ustawianie obrazu tła za pomocą funkcji CSS url

Tła gradientowe w CSS

Istnieje kilka funkcji gradient w CSS, które umożliwiają wygenerowanie tła obrazu po przekazaniu co najmniej 2 kolorów.

Niezależnie od tego, której funkcji gradientu użyjesz, wynikowy obraz ma właściwy rozmiar, aby pasował do dostępnej ilości miejsca.

Demonstracja pokazująca przykład zastosowania obrazu tła za pomocą funkcji gradientu:

Powtarzające się obrazy tła

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Domyślnie obrazy tła powtarzają się poziomo i pionowo, aby wypełnić całą przestrzeń warstwy tła.

Zmień to, używając właściwości background-repeat z jedną z tych wartości:

  • repeat: obraz powtarza się w dostępnym miejscu, przycinając się w razie potrzeby.
  • round: obraz powtarza się poziomo i pionowo, aby zmieścić jak najwięcej jego kopii w dostępnej przestrzeni. W miarę zwiększania dostępnej przestrzeni obraz się rozciąga, a po rozciągnięciu do połowy pierwotnej szerokości obrazu zostaje skompresowany, aby dodać więcej instancji obrazu.
  • space: obraz powtarza się w poziomie i w pionie, aby zmieścić jak najwięcej jego wystąpień w dostępnej przestrzeni bez przycinania – w razie potrzeby odstępy między wystąpieniami obrazu. Powtarzające się obrazy dotykają krawędzi przestrzeni zajmowanej przez warstwę tła, a biała przestrzeń jest równomiernie rozłożona między nimi.

Właściwość background-repeat umożliwia niezależne ustawianie zachowania osi x i osi y. Pierwszy parametr określa zachowanie powtarzania poziomego, a drugi – zachowanie powtarzania pionowego.

Jeśli użyjesz jednej wartości, zostanie ona zastosowana zarówno do powtórzeń poziomych, jak i pionowych.

Skróty zawierają też wygodne opcje jednowyrazowe, które ułatwiają wyrażanie zamiaru.

Wartość repeat-x powtarza obraz tylko w poziomie; jest to równoznaczne z wartością repeat no-repeat.

W tym filmie demonstrujemy te możliwości właściwości background-repeat:

Pozycja tła

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Pewnie zauważysz, że niektóre obrazy w internecie mają styl z deklaracją background-repeat: no-repeat i są wyświetlane w lewym górnym rogu kontenera.

Początkowa pozycja obrazów tła to lewy górny róg. Właściwość background-position pozwala zmienić to zachowanie, przesuwając pozycję obrazu.

Podobnie jak w przypadku właściwości background-repeat, właściwość background-position umożliwia umieszczanie obrazów wzdłuż osi x i y niezależnie od siebie z 2 wartościami domyślnymi.

Gdy używasz długości i procentów w CSS, pierwszy parametr odpowiada osi poziomej, a drugi – osi pionowej.

Gdy używane są tylko słowa kluczowe, ich kolejność nie ma znaczenia:

Tak
background-position: left 50%;
Tak
background-position: top left;
Tak
background-position: left top;

W przypadku słów kluczowych powiązanych z różnymi osiami pozycji kolejność nie ma znaczenia.

Nie
  background-position: 50% left;

Gdy wartości CSS są używane razem ze słowami kluczowymi, kolejność ma znaczenie. Pierwsza wartość reprezentuje oś poziomą, a druga – oś pionową.

Nie
  background-position: left right;

Nie możesz jednocześnie używać słów kluczowych powiązanych z tą samą osią.

Właściwość background-position ma też wygodny skrót z 1 wartością; pominięty parametr jest interpretowany jako 50%. Oto przykład, który demonstruje to za pomocą słów kluczowych akceptowanych przez właściwość background-position:

Oprócz domyślnej formy z 2 parametrami i 1 parametrem usługa background-position obsługuje też do 4 parametrów.

Jeśli używasz 3 lub 4 parametrów, długości lub wartości procentowej w CSS musi poprzedzać słowo kluczowe top, left, right lub bottom, aby przeglądarka mogła obliczyć, od której krawędzi pola CSS ma pochodzić przesunięcie.

Gdy używane są 3 parametry, długość lub wartość CSS może być drugim lub trzecim parametrem, a pozostałe 2 słowa kluczowe. Słowo kluczowe, które poprzedza długość lub wartość CSS, będzie używane do określenia krawędzi, do której odnosi się przesunięcie. Odsunięcie drugiego podanego słowa kluczowego ma wartość 0.

Tak
background-position: bottom 88% right;
Tak
background-position: right bottom 88%;
Nie
background-position: 88% bottom right;
W przypadku użycia co najmniej 3 parametrów wartość długości w CSS musi być poprzedzona słowami kluczowymi top, right, bottom lub left.
Tak
background-position: bottom 88% right 33%;
Tak
background-position: right 33% bottom 88%;
Nie
background-position: 88% 33% bottom left;
W przypadku użycia co najmniej 3 parametrów wartość długości w CSS musi być poprzedzona słowami kluczowymi top, right, bottom lub left.

Jeśli parametr background-position: top left 20% zostanie zastosowany do obrazu tła CSS, obraz zostanie umieszczony u góry pola. Wartość 20% odpowiada przesunięciu o 20% w stosunku do lewej strony pola (na osi X).

Jeśli do obrazu tła CSS zastosowano wartość background-position: top 20% left, wartość 20% oznacza przesunięcie o 20% od góry pola CSS (na osi y), a obraz jest umieszczany po lewej stronie pola.

Gdy używasz 4 parametrów, 2 słowa kluczowe są powiązane z 2 wartościami odpowiadającymi przesunięciu względem początków każdego z wybranych słów kluczowych. Jeśli do elementu background-image zastosujesz wartość background-position: bottom 20% right 30%, element ten będzie znajdować się 20% od dołu i 30% od prawej strony pola CSS.

Poniżej znajdziesz demonstrację tego zachowania:

Oto więcej przykładów użycia właściwości background-position z użyciem wartości CSS i słów kluczowych:

Rozmiar tła

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Właściwość background-size określa rozmiar obrazów tła. Domyślnie obrazy tła mają rozmiar określony na podstawie ich rzeczywistej szerokości, wysokości i formatu obrazu.

Właściwość background-size używa wartości długości i procentów w CSS lub konkretnych słów kluczowych. Właściwość ta akceptuje maksymalnie 2 parametry, które umożliwiają niezależną zmianę szerokości i wysokości tła.

Właściwość background-size obsługuje te słowa kluczowe:

  • auto: gdy jest używany samodzielnie, obraz tła jest skalowany na podstawie swojej rzeczywistej szerokości i wysokości; gdy auto jest używany razem z inną wartością CSS dla szerokości (pierwszy parametr) lub wysokości (drugi parametr), wymiar ustawiony na auto jest skalowany w sposób zapewniający naturalny współczynnik proporcji obrazu. Jest to domyślne działanie właściwości background-size.
  • cover: obejmuje cały obszar warstwy tła. Może to oznaczać, że obraz jest pomniejszony lub przycięty.
  • contain: zmienia rozmiar obrazu, aby wypełniał on całą dostępną przestrzeń bez rozciągania ani przycinania. W rezultacie może pozostać pusta przestrzeń, która spowoduje powtarzanie obrazu, chyba że background-repeat zostanie ustawiony na no-repeat.

Te ostatnie 2 parametry są przeznaczone do samodzielnego stosowania bez innego parametru.

W tym filmie demonstrujemy działanie tych słów kluczowych:

Demonstracja zastosowania tych słów kluczowych w background-size:

Załącznik w tle

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Właściwość background-attachment umożliwia modyfikowanie zachowania pozycji stałej obrazów tła (obrazów będących częścią warstwy tła) po tym, jak warstwa jest widoczna na ekranie.

Akceptuje 3 słowa kluczowe: scroll, fixed i local.

Domyślne działanie właściwości background-attachment to wartość początkowa scroll. Gdy potrzeba więcej miejsca, obrazy przesuwają się w ramach warstwy tła, zgodnie z ograniczeniami pola CSS.

Użycie wartości fixed powoduje zablokowanie pozycji obrazów tła w widocznym obszarze.

Gdy obrazy na warstwie tła zajmą całą dostępną przestrzeń, trzeba je przewinąć (lub wyrenderować) poza ekran. Obrazy na warstwie tła pozostają w pierwotnej pozycji, dopóki cała warstwa nie zostanie przewinięta poza ekran przez obszar wyświetlania.

Kluczowe słowo local umożliwia ustalenie pozycji obrazów tła w stosunku do zawartości elementu. Obrazy tła poruszają się teraz w obszarze, który zajmują, ponieważ ten obszar jest renderowany wewnątrz i na zewnątrz granic pola CSS (zwykle z powodu przewijania lub transformacji 2D lub 3D).

Pochodzenie tła

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

Właściwość background-origin umożliwia modyfikowanie obszaru tła powiązanego z konkretnym polem. Wartości akceptowane przez tę właściwość odpowiadają regionom border-box, padding-box i content-box w polu .

Wypróbuj te opcje, korzystając z tego demonstracyjnego pliku:

Klip tła

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Właściwość background-clip określa, co jest widoczne na warstwie tła niezależnie od ograniczeń określonych przez właściwość background-origin.

Podobnie jak w przypadku background-origin, można określić regiony border-box, padding-boxcontent-box odpowiadające renderowaniu warstwy tła CSS. Gdy używasz tych słów kluczowych, renderowanie tła poza określonym obszarem zostanie przycięte.

Właściwość background-clip akceptuje też słowo kluczowe text, które przycina tło tak, aby nie było szersze niż tekst w polu treści. Aby efekt był widoczny w samym tekście w polu CSS, tekst musi być częściowo lub całkowicie przezroczysty.

W momencie pisania tego tekstu jest to stosunkowo nowa usługa. Aby z niej korzystać, w Chrome i większości przeglądarek wymagany jest prefiks -webkit-.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Wiele tła

Jak już wspomnieliśmy na początku tego modułu, warstwa tła umożliwia zdefiniowanie wielu warstw podrzędnych. Dla zwięzłości będę nazywać te podwarstwy tłem.

Wiele teł jest zdefiniowanych od góry do dołu. Pierwsze tło jest najbliżej użytkownika, a ostatnie – najdalej.

Jedynie zdefiniowane tło lub ostatnia warstwa jest oznaczona przez przeglądarkę jako ostatnia warstwa tła. Tylko ta warstwa może przypisać background-color.

Wiele warstw można konfigurować indywidualnie, korzystając z większości właściwości CSS związanych z tłem, które są rozdzielane przecinkami, jak pokazano w fragmentie kodu i poniżej w demonstracji na żywo.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

Skrót do tła

Aby ułatwić stylizację warstwy tła pola, zwłaszcza gdy potrzebne są liczne warstwy tła, dostępna jest skrótowa metoda, która działa według tego wzoru:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

Kolejność jest ważna w przypadku skróconej formy deklarowania wielu teł. Należy podać wartości pozycji i rozmiaru rozdzielone ukośnikiem (/). Zadeklarowanie pochodzenia i zachowania w prawidłowej kolejności pozwala korzystać z ustawienia słów kluczowych, które są ważne dla obu tych wartości jednocześnie.

Poniższa deklaracja przycina tło i pochodzi z elementu treści:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Mając na uwadze tę semantykę skrótu, poprzednie deklaracje dotyczące tła w fragmencie kodu można przepisać w ten sposób:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o tłach w CSS

Obrazy tła są umieszczane w lewym górnym rogu pola CSS.

Prawda
Fałsz

Obrazy tła są domyślnie powtarzane.

Fałsz
Prawda

Które z tych deklaracji background-position są ważne?

background-position: top right 33%
background-position: left
background-position: right bottom
background-position: 50% left

Aby ustawić obraz tła jako stały w obszarze widoku:

background-attachment: scroll
background-fixed-to-viewport: true
background-position: fixed
background-attachment: fixed

Domyślna wartość atrybutu background-origin tła w polu CSS to:

padding-box
margin-box
content-box
border-box