Przykład
Ustawić różne właściwości tła w jednej deklaracji:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Spróbuj sam " Definicja i Wykorzystanie
Tło skróconą własnością ustawia wszystkie właściwości tła w jednej deklaracji.
Właściwości, które można ustawić, to: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, a background-attachment.
To nie ma znaczenia, czy jeden z powyższych wartości brakuje, np background: # ff0000 url(smiley.gif) ; jest dozwolone.
| Domyślna wartość: | see individual properties |
|---|---|
| Dziedziczny: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| Wersja: | CSS1 + new properties in CSS3 |
| Składnia JavaScript: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| background | 1,0 | 4,0 | 1,0 | 1,0 | 3,5 |
Note: Internet Explorer 8 i wcześniejsze wersje nie obsługują wielu obrazów tła na jednym elemencie.
Uwaga: Patrz indywidualne wsparcie przeglądarki dla każdej wartości poniżej.
Składnia CSS
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;Uwaga: Jeśli jedna z właściwości w deklaracji skróconej stanowi własność BG-size, trzeba używać / (slash) , aby oddzielić go od nieruchomości BG-pozycyjnego, np background:url(smiley.gif) 10px 20px / 50px 50px ; spowoduje obraz tła, umieszczony 10 pikseli z lewej strony 20 pikseli od góry, a rozmiar obrazu będzie 50 pikseli szerokości i 50 pikseli wysokości.
Uwaga: W przypadku korzystania z wielu źródeł background-image, ale także chcą background-color, parametr background-color musi być ostatnim na liście.
wartości nieruchomości
| Wartość | Opis | CSS |
|---|---|---|
| background-color | Określa kolor tła do wykorzystania | 1 |
| background-image | Określa jeden lub więcej obrazów tła do wykorzystania | 1 |
| background-position | Określa położenie obrazów tła | 1 |
| background-size | Określa rozmiar obrazów tła | 3 |
| background-repeat | Określa sposób powtórzyć obrazy tła | 1 |
| background-origin | Określa obszar pozycjonowania obrazów tła | 3 |
| background-clip | Określa obszar malowanie obrazów tła | 3 |
| background-attachment | Określa, czy obrazy są stałe tło i przesuwa się wraz z resztą strony | 1 |
| inicjał | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | 3 |
| dziedziczyć | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą | 2 |
Podobne strony
Kurs CSS: CSS Tło
Tutorial CSS3: CSS3 Tła
Odniesienia HTML DOM: background property