Wiele tła CSS
W tym rozdziale dowiesz się, jak dodać wiele obrazów tła do jednego elementu.
Dowiesz się również o następujących właściwościach:
background-sizebackground-originbackground-clip
Wiele tła CSS
CSS umożliwia dodanie wielu obrazów tła dla elementu za pośrednictwem
background-imagewłaściwości.
Różne obrazy tła są oddzielone przecinkami, a obrazy są ułożone jeden na drugim, gdzie pierwszy obraz znajduje się najbliżej widza.
Poniższy przykład ma dwa obrazy tła, pierwszy obraz to kwiat (wyrównany do dołu i do prawej), a drugi obraz to papierowe tło (wyrównany do lewego górnego rogu):
Przykład
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Wiele obrazów tła można określić za pomocą indywidualnych właściwości tła (jak powyżej) lub backgroundskróconej właściwości.
W poniższym przykładzie użyto backgroundwłaściwości skróconej (ten sam wynik, co w powyższym przykładzie):
Przykład
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Rozmiar tła CSS
Właściwość CSS background-sizeumożliwia określenie rozmiaru obrazów tła.
Rozmiar można określić za pomocą długości, wartości procentowych lub za pomocą jednego z dwóch słów kluczowych: zawierają lub okładka.
Poniższy przykład zmienia rozmiar obrazu tła na znacznie mniejszy niż oryginalny obraz (przy użyciu pikseli):
Podziękuj mu za ból
Sam ból jest miłością
Dlatego to dla najmniejszego, kogo znosi nasza normalna praktyka, aby skorzystać z konsekwencji
Oto kod:
Przykład
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Dwie inne możliwe wartości background-sizeto contain
i cover.
Słowo containkluczowe skaluje obraz tła, aby był jak największy (ale zarówno jego szerokość, jak i wysokość muszą mieścić się w obszarze zawartości). W związku z tym, w zależności od proporcji obrazu tła i obszaru pozycjonowania tła, mogą istnieć obszary tła, które nie są zakryte przez obraz tła.
Słowo coverkluczowe skaluje obraz tła tak, że obszar zawartości jest całkowicie pokryty obrazem tła (zarówno jego szerokość, jak i wysokość są równe lub przekraczają obszar zawartości). W związku z tym niektóre części obrazu tła mogą nie być widoczne w obszarze pozycjonowania tła.
Poniższy przykład ilustruje użycie containi cover:
Przykład
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Zdefiniuj rozmiary wielu obrazów tła
Właściwość background-sizeakceptuje również wiele wartości rozmiaru tła (przy użyciu listy rozdzielanej przecinkami) podczas pracy z wieloma tłami.
W poniższym przykładzie określono trzy obrazy tła, z różnymi wartościami rozmiaru tła dla każdego obrazu:
Przykład
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Pełny rozmiar obrazu tła
Teraz chcemy mieć obraz tła w witrynie, który przez cały czas obejmuje całe okno przeglądarki.
Wymagania są następujące:
- Wypełnij całą stronę obrazem (bez spacji)
- Skaluj obraz w razie potrzeby
- Wyśrodkuj obraz na stronie
- Nie powodują pasków przewijania
Poniższy przykład pokazuje, jak to zrobić; Użyj elementu <html> (element <html> ma zawsze co najmniej wysokość okna przeglądarki). Następnie ustaw na nim stałe i wyśrodkowane tło. Następnie dostosuj jego rozmiar za pomocą właściwości background-size:
Przykład
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Obraz bohatera
Możesz także użyć różnych właściwości tła w <div>, aby utworzyć obraz bohatera (duży obraz z tekstem) i umieścić go w dowolnym miejscu.
Przykład
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
CSS background-origin Property
Właściwość CSS background-originokreśla położenie obrazu tła.
Właściwość przyjmuje trzy różne wartości:
- border-box - obraz tła zaczyna się od lewego górnego rogu ramki
- padding-box - (domyślnie) obraz tła zaczyna się od lewego górnego rogu krawędzi dopełnienia
- content-box - obraz tła zaczyna się od lewego górnego rogu treści
Poniższy przykład ilustruje background-originwłaściwość:
Przykład
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS background-clip Property
Właściwość CSS background-clipokreśla obszar malowania tła.
Właściwość przyjmuje trzy różne wartości:
- border-box - (domyślnie) tło jest zamalowane do zewnętrznej krawędzi ramki
- padding-box - tło jest zamalowane do zewnętrznej krawędzi wyściółki
- content-box - tło jest zamalowane w polu zawartości
Poniższy przykład ilustruje background-clipwłaściwość:
Przykład
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Zaawansowane właściwości tła CSS
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |