Tła

Podcast o CSS – 053: tło

Tła

Za każdym polem CSS znajduje się specjalistyczna warstwa zwana warstwą tła. CSS umożliwia wprowadzanie istotnych zmian w tych treściach na wiele sposobów, w tym m.in. możliwość używania wielu tła.

Warstwy tła są oddalone od użytkownika i wyświetlane za zawartością pola, zaczynając od regionu padding-box. Dzięki temu warstwa tła nie będzie w ogóle nakładać się na obramowanie.

Kolor tła

Obsługa przeglądarek

  • 1
  • 12
  • 1
  • 1

Źródło

Jednym z najprostszych efektów, jakie można zastosować na warstwę tła, jest ustawienie koloru. Wartość początkowa elementu background-color to transparent, co oznacza, że treść elementu nadrzędnego jest widoczna. Prawidłowy kolor ustawiony w warstwie tła jest widoczny za innymi obiektami namalowanymi na tym elemencie.

Obrazy tła

Obsługa przeglądarek

  • 1
  • 12
  • 1
  • 1

Źródło

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 z użyciem funkcji CSS url.
  • Obraz tworzony dynamicznie przez funkcję CSS gradientu.

Ustawianie obrazu tła za pomocą funkcji CSS url

Tła gradientu CSS

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

Niezależnie od użytej funkcji gradientu wynikowy obraz jest wewnętrzny dopasowywany do dostępnego miejsca.

Prezentacja przedstawiająca przykład stosowania obrazu tła za pomocą funkcji gradientu:

Powtarzające się obrazy tła

Obsługa przeglądarek

  • 1
  • 12
  • 1
  • 1

Źródło

Domyślnie obrazy tła powtarzają się w poziomie i w pionie, 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ępnej przestrzeni i jest przycinany w razie potrzeby.
  • round: obraz powtarza się w poziomie i w pionie, aby zmieścić się w jak największej liczbie instancji. W miarę zwiększania dostępnego miejsca obraz jest powiększany, a po rozciągnięciu połowy jego pierwotnej szerokości obraz jest kompresowany w celu dodania kolejnych instancji obrazu.
  • space: obraz powtarza się w poziomie i w pionie, aby zmieścić się w jak największej liczbie wystąpień bez przycinania. W razie potrzeby odstępy między poszczególnymi fragmentami obrazu są dodawane w odpowiednich odstępach. Powtarzające się obrazy stykają się z krawędziami obszaru zajmowanego przez warstwa tła, a bez odstępów są między nimi równo rozłożone.

Właściwość background-repeat umożliwia niezależne ustawienie działania osi x i y. Pierwszy parametr ustawia powtarzanie w poziomie, a drugi – sposób powtarzania w pionie.

Jeśli użyjesz pojedynczej wartości, zostanie ona zastosowana do powtórzeń w pionie i w poziomie.

Skrócony skrót zawiera również wygodne opcje składające się z 1 słowa, aby zwiększyć czytelność intencji.

Wartość repeat-x powtarza obraz tylko w poziomie; odpowiada funkcji repeat no-repeat.

Ta wersja demonstracyjna pokazuje możliwości usługi background-repeat:

Pozycja tła

Obsługa przeglądarek

  • 1
  • 12
  • 1
  • 1

Źródło

Być może udało Ci się zauważyć, że styl niektórych obrazów w internecie zawiera deklarację background-repeat: no-repeat, dlatego są one wyświetlane w lewym górnym rogu kontenera.

Początkowe położenie obrazów tła znajduje się w lewym górnym rogu. Właściwość background-position umożliwia zmianę tego działania przez przesunięcie położenia obrazu.

Tak jak w przypadku background-repeat, właściwość background-position pozwala na niezależne umieszczanie obrazów na osi x i y przy użyciu domyślnych 2 wartości.

W przypadku długości i wartości procentowych CSS pierwszy parametr odpowiada osi poziomej, a drugi odpowiada osi pionowej.

Jeśli słowa kluczowe są używane tylko w kolejności, nie ma znaczenia:

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

Kolejność nie ma znaczenia w przypadku słów kluczowych powiązanych z różnymi osiami pozycji.
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żna jednocześnie używać słów kluczowych powiązanych z tą samą osią.

Właściwość background-position ma też wygodny skrót jednej wartości. Pominięta wartość przyjmuje wartość 50%. Ten przykład ilustruje tę czynność przy użyciu słów kluczowych akceptowanych w usłudze background-position:

Oprócz domyślnego formularza z 2 parametrami i jednego formularza parametru background-position akceptuje też maksymalnie 4 parametry.

W przypadku użycia trzech lub czterech parametrów wartość procentowa CSS musi być poprzedzona słowami kluczowymi top, left, right lub bottom, aby przeglądarka mogła obliczyć, z której krawędzi pola CSS ma pochodzić przesunięcie.

W przypadku użycia 3 parametrów długość lub wartość CSS może być drugim lub trzecim parametrem, a pozostałe 2 słowami kluczowymi. Następne słowo kluczowe będzie służyć do określenia krawędzi, której długości lub wartości CSS odpowiada przesunięcie. Przesunięcie drugiego określonego słowa kluczowego jest ustawione na 0.

Tak
background-position: bottom 88% right;
Tak
background-position: right bottom 88%;
Nie
background-position: 88% bottom right;
Jeśli używasz co najmniej 3 parametrów, wartość długości 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;
Jeśli używasz co najmniej 3 parametrów, wartość długości CSS musi być poprzedzona słowami kluczowymi top, right, bottom lub left.

Jeśli atrybut background-position: top left 20% jest zastosowany do obrazu tła w CSS, znajduje się on u góry pola, wartość 20% reprezentuje 20% odsunięcie od jego lewej strony (na osi X).

Jeśli atrybut background-position: top 20% left jest zastosowany do obrazu tła CSS, wartość 20% oznacza odsunięcie o 20% od górnej krawędzi pola CSS (na osi Y), a obraz jest umieszczany po lewej stronie pola.

W przypadku użycia 4 parametrów oba słowa kluczowe są sparowane z 2 wartościami odpowiadającymi przesunięciem względem źródła każdego podanego słowa kluczowego. Jeśli zastosujesz atrybut background-position: bottom 20% right 30% do obrazu tła, będzie on położony 20% od dołu i 30% od prawej strony pola CSS.

Działanie to pokazaliśmy w tej prezentacji:

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

Rozmiar tła

Obsługa przeglądarek

  • 3
  • 12
  • 4
  • 5

Źródło

Właściwość background-size określa rozmiar obrazów tła. Domyślnie rozmiar obrazów tła jest ustalany na podstawie ich faktycznej szerokości, wysokości i współczynnika proporcji.

Właściwość background-size korzysta z długości i procentowych wartości CSS lub konkretnych słów kluczowych. Właściwość akceptuje maksymalnie 2 parametry odpowiadające możliwości niezależnej zmiany szerokości i wysokości tła.

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

  • auto: gdy używany jest niezależnie, rozmiar obrazu tła jest ustalany na podstawie jego wewnętrznej szerokości i wysokości; gdy atrybut auto jest używany razem z inną wartością CSS dla szerokości (pierwszy parametr) lub wysokości (drugi parametr), rozmiar ustawiony jako auto jest dostosowywany do rozmiaru obrazu, który pozwala zachować naturalny współczynnik proporcji obrazu. Jest to domyślne działanie właściwości background-size.
  • cover: zakrywa cały obszar warstwy tła. Może to oznaczać, że obraz jest rozciągnięty lub przycięty.
  • contain: zmienia rozmiar obrazu, aby wypełnił przestrzeń bez rozciągania i przycinania. W rezultacie może pozostać puste miejsce, które spowoduje powtarzanie obrazu, chyba że background-repeat ma wartość no-repeat.

Drugich parametrów należy używać osobno.

Poniższa prezentacja przedstawia działanie tych słów kluczowych:

Prezentacja zastosowania tych słów kluczowych do reklamy background-size:

Załącznik w tle

Obsługa przeglądarek

  • 1
  • 12
  • 1
  • 1

Źródło

Właściwość background-attachment pozwala zmieniać stałe położenie obrazów tła (obrazów będących częścią warstwy tła), gdy 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ę wraz z tą przestrzenią w warstwie tła, zgodnie z granicami pola CSS.

Wartość fixed poprawia pozycję obrazów tła w widocznym obszarze.

Gdy przestrzeń obrazów warstwy tła będzie początkowo musiała zostać przewinięta (czyli wyrenderowana) poza ekran, obrazy w warstwie tła pozostają w pierwotnej pozycji, tak aby mogły się znajdować, dopóki cała warstwa nie zniknie z ekranu zgodnie z widocznym obszarem.

Słowo kluczowe local umożliwia stałą pozycję obrazów tła względem zawartości elementu. Obrazy tła przesuwają się teraz wzdłuż zajmowanej przestrzeni, ponieważ jest ona renderowana wewnątrz i na zewnątrz pola CSS (zwykle w wyniku przewijania oraz przekształceń 2D lub 3D).

Pochodzenie tła

Obsługa przeglądarek

  • 1
  • 12
  • 4
  • 3

Źródło

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

Wypróbuj te opcje w naszej prezentacji:

Klip w tle

Obsługa przeglądarek

  • 1
  • 12
  • 4
  • 5

Źródło

Właściwość background-clip określa, co jest widoczne z warstwy tła niezależnie od granic utworzonych przez właściwość background-origin.

Tak jak w przypadku background-origin, możliwe jest określenie regionów: border-box, padding-box i content-box. Określają one miejsce, w którym może zostać wyrenderowana warstwa CSS tła. Gdy ich używasz, renderowanie tła dłuższego niż określony region zostanie przycięte lub obcięte.

Właściwość background-clip akceptuje również słowo kluczowe text, które przycina tło, nie dalej niż tekst w polu treści. Aby ten efekt był wyraźnie widoczny w rzeczywistym tekście w polu CSS, musi on być częściowo lub całkowicie przezroczysty.

W momencie tworzenia tego tekstu stosunkowo nowa usługa Chrome i większość przeglądarek wymagają prefiksu -webkit-, aby można było z niej korzystać.

Obsługa przeglądarek

  • 1
  • 12
  • 4
  • 5

Źródło

Wiele tła

Jak wspomnieliśmy na początku modułu, warstwa tła umożliwia zdefiniowanie wielu warstw podrzędnych. Dla zachowania zwięzłości te warstwy podrzędne będą nazywane tłem.

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

Jedyne zdefiniowane lub ostatnie warstwa tła jest określane przez przeglądarkę jako ostatnią warstwę tła. Tylko ta warstwa może przypisać funkcję background-color.

Można skonfigurować wiele warstw, korzystając z większości właściwości CSS związanych z tłem. Rozdzielaj je przecinkami, jak pokazano we fragmencie kodu i prezentacji poniżej.

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ócony opis tła

Aby ułatwić stylizowanie warstwy tła pola, zwłaszcza gdy potrzebnych jest wiele warstw tła, dostępny jest skrót zgodny z następującym, określonym wzorem:

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

Kolejność ma znaczenie w skrócie – deklarowanie wielu tła ma znaczenie. Wartości pozycji i rozmiaru muszą być podane oddzielone ukośnikiem (/). Zadeklarowanie pochodzenia i elementu klipu we właściwej kolejności pozwala na konfigurowanie słów kluczowych, które mogą być używane jednocześnie w przypadku obu tych elementów.

Poniższa deklaracja usuwa tło i pobiera je z pola treści:

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

Z uwzględnieniem tych skróconych określeń semantycznych można przepisać poprzednie deklaracje dotyczące fragmentu kodu związane z tamą kodu w taki 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 CSS

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

Prawda
Dobrze!
Fałsz
W zależności od swojego wewnętrznego rozmiaru obraz może nie znajdować się w lewym górnym rogu pola CSS. W związku z tym zmiana domyślnej pozycji obrazu tła wymaga użycia background-position.

Domyślnie obrazy tła nie powtarzają się.

Fałsz
Aby obraz tła nie powtarzał się, należy wyraźnie użyć parametru background-repeat: no-repeat. Możesz też użyć elementów background-repeat: repeat-x i background-repeat: repeat-y, aby zapobiec powtarzaniu się tych elementów na danej osi.
Prawda
Dobrze!

Które z tych deklaracji background-position są prawidłowe?

background-position: 50% left
Gdy w przypadku słów kluczowych używasz wartości CSS, kolejność wartości ma znaczenie.
background-position: top right 33%
Powoduje to umieszczenie obrazu tła na samej górze pola i o 33% od jego prawej krawędzi.
background-position: right bottom
Spowoduje to umieszczenie obrazu tła na samym dole i na samym dole pola. Położenie różniących się od siebie osi można nadawać w dowolnej kolejności.
background-position: left
Spowoduje to umieszczenie obrazu tła w lewej części pola i wyśrodkowanie w pionie. Jeśli określono tylko jedną pozycję osi, obraz tła będzie wyśrodkowany na przeciwnej osi.

Aby ustawić stały obraz tła w widocznym obszarze, użyj metody:

background-position: fixed
„To jest nieprawidłowa wartość właściwości background-position”.
background-fixed-to-viewport: true
Element background-fixed-to-viewport jeszcze nie istnieje w usłudze porównywania cen.
background-attachment: fixed
background-attachment: fixed bezpośrednio ustawia stały obraz tła w bieżącym widocznym obszarze.
background-attachment: scroll
„background-attachment” to właściwość, która służy do ustawiania obrazu tła na stałe w widocznym obszarze. scroll to jednak domyślna wartość właściwości, która domyślnie poprawia obraz tła w polu, na które zawartość pola nie ma wpływu.

Domyślne źródło tła w polu CSS to:

content-box
Prawidłowa wartość parametru background-origin, ale nie jest domyślna.
border-box
Prawidłowa wartość parametru background-origin. Jej wstępnie ułożone obramowania można malować na tłach, ale nie jest to ustawienie domyślne.
padding-box
Wartość domyślna parametru background-origin. Pozwala na renderowanie tła poza treścią i aż do obramowania ramki.
margin-box
Chociaż rozpoznawany region pola CSS jest nieprawidłowy, jest to nieprawidłowa wartość właściwości background-origin.