Kurs HTML

Wprowadzenie: Do jakiego obszaru rysujemy tło?

Właściwość background-clip określa, jak daleko ma się rozciągać tło elementu (zarówno background-color, jak i background-image). Pozwala ona **przyciąć** obszar malowania tła do określonego pudełka w modelu pudełkowym.

Domyślnie tło rozciąga się aż do zewnętrznej krawędzi obramowania (border-box).

Wartości background-clip

Właściwość background-clip przyjmuje następujące wartości:

• border-box: (Domyślne) Tło jest rysowane aż do zewnętrznej krawędzi obramowania (pod nim).
• padding-box: Tło jest rysowane do zewnętrznej krawędzi wypełnienia (padding). Nie rozciąga się pod obramowaniem.
• content-box: Tło jest rysowane tylko w obrębie obszaru zawartości (content). Nie rozciąga się pod obramowaniem ani pod wypełnieniem.
• text: (Eksperymentalne, wymaga często prefixów -webkit-) Tło jest przycinane do kształtu samego tekstu w elemencie. Aby efekt był widoczny, tekst musi być przezroczysty (color: transparent;) lub półprzezroczysty. Jest to często używane do tworzenia efektu tekstu wypełnionego obrazem lub gradientem.

<div class="box clip-example border-box-clip">border-box (domyślne)</div>
<div class="box clip-example padding-box-clip">padding-box</div>
<div class="box clip-example content-box-clip">content-box</div>
<div class="box clip-example text-clip">TEXT CLIP</div>Kopiuj

.clip-example {
  width: 200px;
  height: 80px;
  padding: 20px;
  border: 10px dashed blue; /* Grube, przerywane obramowanie dla widoczności */
  margin-bottom: 15px;
  background-image: linear-gradient(45deg, red, yellow, green);
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

.border-box-clip {
  background-clip: border-box; 
  /* Gradient widoczny pod przerywanym obramowaniem */
}

.padding-box-clip {
  background-clip: padding-box;
  /* Gradient zaczyna się od wewnętrznej krawędzi obramowania */
}

.content-box-clip {
  background-clip: content-box;
  /* Gradient widoczny tylko w obszarze treści (za paddingiem) */
}

.text-clip {
  font-size: 3em;
  background-clip: text;
  -webkit-background-clip: text; /* Prefix dla starszych przeglądarek WebKit */
  color: transparent; /* Tekst musi być przezroczysty, aby tło było widoczne */
  border-color: transparent; /* Ukryjmy obramowanie dla lepszego efektu */
}Kopiuj

Obserwując powyższe przykłady:

• border-box: Gradient wypełnia całe pudełko, włącznie z obszarem pod przerywanym niebieskim obramowaniem.
• padding-box: Gradient wypełnia obszar paddingu i treści, ale zatrzymuje się na wewnętrznej krawędzi obramowania. Przestrzeń pod obramowaniem jest przezroczysta (lub ma kolor tła rodzica).
• content-box: Gradient wypełnia tylko obszar samej treści, zatrzymując się na wewnętrznej krawędzi paddingu.
• text: Gradient jest widoczny tylko tam, gdzie znajdują się litery tekstu "TEXT CLIP". Sam tekst jest przezroczysty.

Interakcja z background-origin

Jak wspomniano, background-clip określa obszar **rysowania**, a background-origin obszar **pozycjonowania** obrazu tła.

• Jeśli ustawisz background-origin: content-box; i background-clip: padding-box;, obraz tła zostanie spozycjonowany względem rogu obszaru treści, ale będzie rysowany aż do krawędzi paddingu.
• Jeśli ustawisz background-origin: padding-box; (domyślne) i background-clip: content-box;, obraz tła zostanie spozycjonowany względem rogu padding-box, ale będzie widoczny tylko w obszarze content-box.

Najczęściej te dwie właściwości ustawia się na tę samą wartość, aby uniknąć nieoczekiwanych efektów, chyba że celowo chcemy uzyskać specyficzne przesunięcie widocznego fragmentu tła.

Przycinanie wielu obrazów tła

Podobnie jak inne właściwości tła, background-clip może przyjmować wiele wartości oddzielonych przecinkami, jeśli używasz wielu obrazów tła. Każda wartość odnosi się do odpowiedniej warstwy tła.

.multi-bg-clip {
  background-image: url("icon.png"), linear-gradient(red, blue);
  background-repeat: no-repeat, no-repeat;
  background-position: center, top left;
  background-clip: content-box, border-box; /* Ikona przycięta do treści, gradient do obramowania */
  border: 10px solid black;
  padding: 40px;
  height: 150px;
}Kopiuj