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
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
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
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
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:
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 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.
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 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
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 atrybutauto
jest używany razem z inną wartością CSS dla szerokości (pierwszy parametr) lub wysokości (drugi parametr), rozmiar ustawiony jakoauto
jest dostosowywany do rozmiaru obrazu, który pozwala zachować naturalny współczynnik proporcji obrazu. Jest to domyślne działanie właściwościbackground-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 żebackground-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
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
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
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ć.
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.
background-position
.
Domyślnie obrazy tła nie powtarzają się.
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.
Które z tych deklaracji background-position
są prawidłowe?
background-position: 50% left
background-position: top right 33%
background-position: right bottom
background-position: left
Aby ustawić stały obraz tła w widocznym obszarze, użyj metody:
background-position: fixed
background-position
”.
background-fixed-to-viewport: true
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
background-origin
, ale nie jest domyślna.
border-box
background-origin
. Jej wstępnie ułożone obramowania można malować na tłach, ale nie jest to ustawienie domyślne.
padding-box
background-origin
. Pozwala na renderowanie tła poza treścią i aż do obramowania ramki.
margin-box
background-origin
.