Tła

Podcast CSS – 053: Tło .

Tła

Za każdym polem CSS znajduje się specjalistyczna warstwa zwana warstwa tła. CSS umożliwia wprowadzanie istotnych zmian na wiele sposobów, m.in. pozwala na stosowanie różnych tła.

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

Kolor tła

Jednym z najprostszych efektów, które można zastosować do warstwy tła, jest ustawienie koloru. Początkowa wartość właściwości background-color to transparent, co oznacza, że treść elementu nadrzędnego może być widoczna. Prawidłowy kolor ustawiony w warstwie tła jest zasłonięty przez inne elementy namalowane na tym elemencie.

Obrazy tła

Na warstwie 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 tworzony dynamicznie przez funkcję CSS gradientu.

Ustawianie obrazu tła za pomocą funkcji CSS url

Tła z gradientem CSS

Dostępnych jest kilka funkcji CSS gradientu, które umożliwiają generowanie obrazu tła po przesłaniu co najmniej 2 kolorów.

Niezależnie od użytej funkcji gradientu wynikowy obraz jest wymiarowany wewnętrznie tak, by pasował do ilości dostępnego miejsca.

Przykład zastosowania obrazu tła za pomocą funkcji gradientu:

Powtarzające się obrazy tła

Domyślnie obrazy tła powtarzają się w poziomie i w pionie, wypełniając całą powierzchnię warstwy tła.

Zmień to za pomocą właściwości background-repeat z jedną z tych wartości:

• repeat: obraz powtarza się w dostępnym miejscu i w razie potrzeby zostaje przycięty.
• round: obraz powtarza się w poziomie i w pionie, aby zmieścić jak najwięcej wystąpień w dostępnym miejscu. W miarę jak ilość dostępnego miejsca się rozciąga, a po rozciągnięciu do połowy pierwotnej szerokości obrazu obraz zostanie skompresowany w celu dodania kolejnych wystąpień obrazu.
• space: obraz powtarza się w poziomie i w pionie, aby zmieścić jak najwięcej w dostępnym miejscu bez przycinania. W ten sposób możliwe będzie odpowiednie odstępy między obrazami. Powtarzające się obrazy dotykają krawędzi obszaru zajmowanego przez warstwę tła, a między nimi równomiernie jest rozmieszczona biała przestrzeń.

Właściwość background-repeat umożliwia niezależne określanie sposobu działania osi x i y. Pierwszy z nich określa powtarzanie w poziomie, a drugi – powtarzanie w pionie.

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

Skrót ten zawiera też wygodne, jednowyrazowe opcje, które pozwalają jasno określić Twój zamiar.

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

Poniższa demonstracja przedstawia te możliwości właściwości background-repeat:

Pozycja tła

Być może zauważysz, że niektóre obrazy w internecie mają styl z deklaracją background-repeat: no-repeat, a takie obrazy wyświetlają się w lewym górnym rogu kontenera.

Początkowa pozycja 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 pozycji obrazu.

Tak jak w przypadku background-repeat, właściwość background-position umożliwia niezależne umieszczanie obrazów na osi x i y, domyślnie z 2 wartościami.

Jeśli używane są długości i wartości procentowe CSS, pierwszy parametr odpowiada osi poziomej, a drugi – osi pionowej.

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

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

Właściwość background-position ma również wygodny skrót z jedną wartością: pominięta wartość przyjmuje wartość 50%. Oto przykład, który ilustruje to za pomocą słów kluczowych akceptowanych przez właściwość background-position:

Oprócz domyślnej formy z dwoma parametrami i jednym parametrem; właściwość background-position akceptuje też maksymalnie 4 parametry;

Jeśli używane są trzy lub cztery parametry, długość lub wartość procentowa CSS muszą być poprzedzone słowami kluczowymi top, left, right lub bottom, by przeglądarka mogła obliczyć, od której krawędzi pola CSS powinno rozpocząć się przesunięcie.

Jeśli używane są 3 parametry, długość lub wartość CSS może być drugim lub trzecim parametrem, a 2 pozostałe są słowami kluczowymi. odpowiednie słowo kluczowe będzie używane do określenia krawędzi, której długość lub wartość CSS odpowiada przesunięcia. Przesunięcie drugiego słowa kluczowego jest ustawione na 0.

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

Jeśli do obrazu tła CSS zastosujesz atrybut background-position: top left 20%, obraz zostanie umieszczony na górze pola, a wartość 20% oznacza przesunięcie od jego lewej krawędzi o 20% (od osi X).

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

Jeśli używane są cztery parametry, oba słowa kluczowe są łączone z dwiema wartościami odpowiadającymi przesunięciem względem początku każdego wskazanego słowa kluczowego. Jeśli do obrazu tła zastosowano atrybut background-position: bottom 20% right 30%, obraz tła zostanie umieszczony w odległości 20% od dołu i 30% od prawej strony pola CSS.

Oto przykład:

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

Rozmiar tła

Właściwość background-size ustawia rozmiar obrazów tła. Domyślnie rozmiary obrazów tła są ustalane na podstawie ich rzeczywistej (rzeczywistej) szerokości, wysokości i współczynnika proporcji.

Właściwość background-size wykorzystuje wartości długości i procentu CSS lub konkretne słowa kluczowe. Właściwość akceptuje maksymalnie 2 parametry, które pozwalają niezależnie zmieniać szerokość i wysokość tła.

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

• auto: gdy jest używany niezależnie, jego rozmiar jest dopasowywany do jego rzeczywistej 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), wymiar ustawiony na auto jest dopasowywany zgodnie z potrzebami, aby zachować 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 rozciągnięty lub przycięty.
• contain: dopasowuje rozmiar obrazu, aby wypełnił przestrzeń bez rozciągania i przycinania. W efekcie może pozostać puste miejsce, co spowoduje powtarzanie obrazu, chyba że w polu background-repeat ustawiono wartość no-repeat.

Tych ostatnich 2 można używać osobno, bez innego parametru.

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

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

Załącznik w tle

Właściwość background-attachment umożliwia zmianę stałego położenia obrazów tła (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 potrzebne jest więcej miejsca, obrazy przesuwają się wraz z tą przestrzenią w warstwie tła zgodnie z granicami pola CSS.

Użycie wartości fixed ustawia położenie obrazów tła w widocznym obszarze.

Gdy przestrzeń warstwy tła zajmowana przez pierwotne tło musi zostać przewinięta (lub wyrenderowana) poza ekran, obrazy w warstwie tła pozostają w pierwotnym położeniu. Warstwa tła utrzymywała się do momentu przewinięcia całej warstwy poza ekran przez widoczny obszar.

Słowo kluczowe local umożliwia ustalanie pozycji obrazów tła względem zawartości elementu. Obrazy tła teraz przesuwają się po zajmowanej przez siebie przestrzeni, ponieważ ta przestrzeń jest renderowana wewnątrz i poza granicami pola CSS (zwykle w wyniku przewijania oraz przekształceń 2D lub 3D).

Pochodzenie tła

Właściwość background-origin umożliwia zmianę obszaru tła powiązanego z konkretnym polem. Wartości akceptowane przez usługę odpowiadają obszarom border-box , padding-box i content-box pola .

Wypróbuj te opcje w następującej prezentacji:

Klip w tle

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

Tak jak w background-origin, można określić regiony, w których można wyrenderować warstwę tła CSS (border-box, padding-box i content-box). W przypadku użycia tych słów kluczowych wszelkie renderowanie tła poza określonym obszarem zostanie przycięte lub obcięte.

Właściwość background-clip akceptuje też słowo kluczowe text, które powoduje wycięcie tła nie dalej od tekstu w polu treści. Aby ten efekt był widoczny w rzeczywistym tekście w polu CSS, tekst musi być częściowo lub całkowicie przezroczysty.

Jest to względnie nowa usługa w chwili tworzenia tego artykułu, dlatego w Chrome i większości przeglądarek przed jej użyciem wymagane jest użycie prefiksu -webkit-.

Wiele tła

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

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

Jedyne tło zdefiniowane lub ostatnia warstwa jest wskazywana przez przeglądarkę jako końcowa warstwa tła. Tylko ta warstwa może przypisać element background-color.

Wiele warstw można skonfigurować pojedynczo za pomocą większości związanych z tłem właściwości CSS, które są rozdzielone przecinkami, jak pokazano we fragmencie kodu i prezentacji na żywo 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ót do informacji w tle

Aby ułatwić stylizowanie warstwy tła ramki, zwłaszcza gdy istnieje wiele warstw tła, można użyć skrótu zgodnego z następującym, określonym wzorcem:

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

Kolejność jest ważna w skróconej formie deklarowania wielu tła. Musisz podać zarówno wartości pozycji, jak i rozmiaru, rozdzielone ukośnikiem (/). Zadeklarowanie źródła i klipu we właściwej kolejności umożliwia korzystanie z dostosowania słów kluczowych, które są jednocześnie ważne dla obu warunków

Poniższa deklaracja wycina tło i pochodzi z pola treści:

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

Biorąc pod uwagę taką skróconą semantykę, poprzednie deklaracje fragmentu kodu związane z tłem można napisać 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ę na temat tła CSS