The CSS Podcast - 053: Background
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
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
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
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
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:
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 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.
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 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
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; gdyauto
jest używany razem z inną wartością CSS dla szerokości (pierwszy parametr) lub wysokości (drugi parametr), wymiar ustawiony naauto
jest skalowany w sposób zapewniający 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 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 żebackground-repeat
zostanie ustawiony nano-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
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
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
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-box
i content-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-
.
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.
Obrazy tła są domyślnie powtarzane.
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