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 atrybutauto
jest używany razem z inną wartością CSS dla szerokości (pierwszy parametr) lub wysokości (drugi parametr), wymiar ustawiony naauto
jest dopasowywany zgodnie z potrzebami, aby zachować naturalny współczynnik proporcji obrazu. Jest to domyślne działanie właściwościbackground-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 polubackground-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
Obrazy tła są umieszczone w lewym górnym rogu pola CSS.
Domyślnie obrazy tła nie są powtarzane.
Które z tych deklaracji background-position
są prawidłowe?
background-position: right bottom
background-position: top right 33%
background-position: 50% left
background-position: left
Aby ustawić poprawienie obrazu tła w używanym przez Ciebie widocznym obszarze:
background-attachment: fixed
background-fixed-to-viewport: true
background-position: fixed
background-attachment: scroll
Domyślne źródło tła dla pola CSS to:
padding-box
content-box
margin-box
border-box