Kurs HTML

Wprowadzenie: Ustawianie wielu właściwości tła naraz

W poprzednich lekcjach poznaliśmy wiele indywidualnych właściwości służących do kontrolowania różnych aspektów tła elementu (kolor, obraz, powtarzanie, pozycja, rozmiar, przypięcie, origin, clip).

CSS oferuje również właściwość zbiorczą (shorthand) background, która pozwala ustawić **wszystkie te właściwości w jednej deklaracji**. Jest to bardzo wygodny i często stosowany sposób na zwięzłe definiowanie stylu tła.

Składnia właściwości background

Właściwość background może przyjąć wartości dla następujących właściwości, w **dowolnej kolejności**, z kilkoma wyjątkami:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-size (musi być podane **po** background-position, oddzielone ukośnikiem /)
• background-origin
• background-clip

Ważna zasada dotycząca background-size: Jeśli chcesz ustawić background-size w ramach shorthandu, musisz go podać bezpośrednio po wartości background-position, oddzielając je ukośnikiem (/). Na przykład: background: url(...) center / cover;.

Ważna zasada dotycząca background-origin i background-clip: Jeśli podasz tylko jedną wartość typu "box" (padding-box, border-box, content-box), zostanie ona zastosowana zarówno do background-origin, jak i background-clip. Jeśli podasz dwie wartości "box", pierwsza ustawi background-origin, a druga background-clip.

/* Przykłady użycia shorthandu background */

/* Tylko kolor */
.element1 {
  background: lightblue;
}

/* Kolor i obrazek (niepowtarzalny, wycentrowany) */
.element2 {
  background: lightgray url("icon.png") no-repeat center;
}

/* Obrazek jako pełne tło (cover) */
.element3 {
  background: url("hero.jpg") no-repeat center center / cover;
  /* Składnia: image repeat position / size */
  /* Można pominąć powtórne center dla pozycji */
  /* background: url("hero.jpg") no-repeat center / cover; */
}

/* Wiele obrazów tła z różnymi ustawieniami */
.element4 {
  background:
    /* Warstwa 1: logo */
    url("logo.png") no-repeat left 10px top 10px / 50px, /* image repeat position / size */
    /* Warstwa 2: gradient */
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8)),
    /* Warstwa 3: tekstura */
    url("texture.png") repeat;
  /* Domyślny kolor tła pod wszystkimi warstwami */
  background-color: #333; 
  /* Uwaga: background-color jest ustawiany osobno, gdy używamy wielu teł w shorthandzie */
}

/* Ustawienie origin i clip */
.element5 {
  /* origin=content-box, clip=content-box */
  background: url("icon.png") no-repeat content-box;
}

.element6 {
  /* origin=border-box, clip=content-box */
  background: url("icon.png") no-repeat border-box content-box;
}
Kopiuj

Resetowanie wartości

Użycie właściwości zbiorczej background ma ważny efekt uboczny: **resetuje wszystkie indywidualne właściwości tła do ich wartości domyślnych**, jeśli nie zostaną one jawnie podane w shorthandzie.

Na przykład, jeśli wcześniej ustawiłeś background-image, a następnie użyjesz background: blue;, to obraz tła zostanie usunięty (ponieważ domyślną wartością dla background-image jest none).

.box {
  background-image: url("obrazek.jpg");
  background-repeat: no-repeat;
  background-color: lightyellow; 
}

/* ... później w kodzie ... */

.box {
  /* Ten styl nadpisze poprzednie! */
  background: lightblue; 
  /* Efekt: tło będzie tylko jasnoniebieskie, obrazek zniknie, */
  /* a repeat wróci do domyślnego 'repeat'. */
}

/* Poprawne nadpisanie tylko koloru: */
.box {
  background-color: lightblue; /* Zmienia tylko kolor, reszta pozostaje */
}
Kopiuj

Dlatego ważne jest, aby używać shorthandu świadomie. Jest on świetny do inicjalnego ustawienia tła, ale do modyfikacji pojedynczych aspektów tła lepiej używać indywidualnych właściwości.

Wiele teł w shorthandzie

Jak pokazano w przykładzie .element4, można definiować wiele warstw tła za pomocą shorthandu, oddzielając definicje poszczególnych warstw przecinkami. Należy jednak pamiętać, że:

• Właściwość background-color może być zdefiniowana tylko **raz**, dla **ostatniej** (najniższej) warstwy tła. Zazwyczaj ustawia się ją osobno, poza shorthandem, dla większej czytelności.
• Dla każdej warstwy można podać odpowiednie wartości background-image, background-repeat, background-attachment, background-position, background-size, background-origin, background-clip.