tła CSS3
CSS3 zawiera kilka nowych właściwości tła, które pozwalają na większą kontrolę nad elementem tła.
W tym rozdziale dowiesz się, jak dodać kilka obrazów tła do jednego elementu.
Dowiesz się również o następujących nowych właściwości CSS3:
-
background-size -
background-origin -
background-clip
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Wiele Tła
CSS3 pozwala na dodanie wielu obrazów tła dla elementu, poprzez background-image nieruchomości.
Poszczególne obrazy tła są oddzielone przecinkami, a obrazy są ułożone jedna na drugiej, gdzie pierwszy obraz jest najbliżej widza.
Poniższy przykład ma dwa obrazy tła, pierwszy obraz jest kwiat (wyrównany do dołu iw prawo), a drugi obraz jest tło papieru (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;
} Spróbuj sam " Wiele obrazów tła może być określona przy użyciu indywidualnych właściwości tła (jak wyżej) lub background skróconą własnością.
Poniższy przykład używa background skróconą własnością (taki sam wynik jak przykład powyżej):
Przykład
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Spróbuj sam " CSS3 Tło Rozmiar
CSS3 background-size właściwość pozwala określić rozmiar obrazów tła.
Przed CSS3, rozmiar obrazu tła był rzeczywisty rozmiar obrazu. CSS3 pozwala na ponowne wykorzystanie obrazów tła w różnych kontekstach.
Rozmiar może być określony w długościach, procenty, lub za pomocą jednego z dwóch kluczowych: zawierają lub pokrywa.
Poniższy przykład zmienia rozmiar obrazu tła znacznie mniejsze niż w oryginalnym obrazie (przy użyciu pikselach):
Oryginalny obraz tła:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Przeskalowany obraz tła:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Oto kod:
Przykład
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Spróbuj sam " Pozostałe dwie możliwe wartości dla background-size są contain i cover .
contain kluczowe skaluje obraz tła, aby być tak duży, jak to możliwe (ale zarówno jego szerokości i jego wysokości musi mieścić się wewnątrz obszaru zawartości). W związku z tym, w zależności od proporcji obrazu tła i obszaru pozycjonowania tła, mogą istnieć pewne obszary w tle, które nie są objęte obrazu tła.
cover kluczowe skaluje obraz tła tak, że obszar treść jest całkowicie pokryte przez obraz tła (zarówno jej szerokość i wysokość są równe lub przekraczają obszar zawartości). Jako takie, niektóre części obrazu tła może nie być widoczna w obszarze pozycjonowania tła.
Poniższy przykład ilustruje zastosowanie contain i 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;
}
Spróbuj sam " Definiowanie rozmiarów wielu obrazów tła
background-size Obiekt akceptuje również wiele wartości dla wielkości tła (za pomocą listę oddzielonych przecinkami), podczas pracy z wielu środowisk.
Poniższy przykład ma trzy obrazy tła określony, z różnym background-size wartość dla każdego obrazka:
Przykład
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Spróbuj sam " Pełny rozmiar obrazu tła
Teraz chcemy, aby mieć obraz tła na stronie internetowej, która obejmuje całe okno przeglądarki, w każdym czasie.
Wymagania są następujące:
- Wypełnić całą stronę z obrazem (bez białych spacji)
- Skala obrazu w zależności od potrzeb
- Centrum obrazu na stronie
- Nie powodować przewijania
Poniższy przykład pokazuje, jak to zrobić; Użyj elementu HTML (element html jest zawsze co najmniej wysokość okna przeglądarki). Następnie ustawić stałą i skoncentrowany tło na niego. Następnie dostosuj jego rozmiar za pomocą background-size nieruchomości:
Przykład
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Spróbuj sam " CSS3 background-origin nieruchomości
CSS3 background-origin właściwość określa, gdzie obraz tła jest ustawiony.
Obiekt przyjmuje trzy różne wartości:
- border-box - obraz tła zaczyna się od lewego górnego rogu granicy
- 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-origin właściwość:
Przykład
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Spróbuj sam " CSS3 background-clip nieruchomości
CSS3 background-clip właściwość określa obszar malowania tła.
Obiekt przyjmuje trzy różne wartości:
- border-box - (domyślnie) tło jest malowane na zewnętrznej krawędzi granicy
- padding-box - tło jest malowane na zewnętrznej krawędzi wyściółki
- content-box - tło jest malowane w polu zawartości
Poniższy przykład ilustruje background-clip właściwość:
Przykład
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Właściwości CSS3 Tło
| Nieruchomość | Opis |
|---|---|
| background | Skrót nieruchomości na ustawienie wszystkich właściwości tła w jednej deklaracji |
| background-clip | Określa obszar malowania tła |
| background-image | Określa jeden lub więcej obrazów tła dla elementu |
| background-origin | Określa gdzie obraz (y) w tle jest / są umieszczone |
| background-size | Określa rozmiar obrazu tła (e) |