Własność CSS background-clip

Własność CSS background-clip określa obszar elementu, do którego ma zostać przycięty obraz ustawiony w tle.

W modelu polowym CSS wyróżnione są trzy obszary zawartości elementu: obszar obramowania, obszar dopełnienia i obszar treści. Własność background-clip pozwala przyciąć obraz ustawiony w tle do jednego z tych obszarów lub tylko do obszaru pokrytego tekstem.

Wartości i składnia

Własność background-clip jako wartość przyjmuje jedno z następujących słów kluczowych: border-box, content-box, padding-box i text.

border-box

border: 10px dashed lightpink;
background-clip: border-box;
padding: 20px;

Przykładowy efekt:

Zgodnie z ustawieniem własności background-clip na border-box obraz w tle powinien być widoczny pod obramowaniem z wszystkich stron, a w tym przypadku nie jest.

Jest to spowodowane tym, że nie zdefiniowaliśmy własności background-origin, więc przyjęła ona wartość domyślną padding-box, która powoduje, że obraz tła zaczyna się od krawędzi dopełnienia. Aby to naprawić (jeśli nie to było naszą intencją), wystarczy nadać własności background-origin wartość border-box:

border: 10px dashed lightpink;
background-clip: border-box;
background-origin: border-box;
padding: 20px;

Efekt:

padding-box

Ta wartość powoduje, że obraz w tle jest przycinany do obszaru pola dopełnienia elementu, np.:

border: 5px dashed lightpink;
background-clip: padding-box;
padding: 20px;

Przykładowy efekt:

Należy pamiętać, że tak jak w przypadku wartości border-box, na działanie tej własności ma wpływ ustawienie własności background-origin. Jeśli ma ona wartość content-box, to obraz tła będzie zaczynał się w obszarze treści, a nie w obszarze dopełnienia:

background-clip: padding-box;
background-origin: content-box;

Efekt:

content-box

Ta wartość powoduje, że obraz w tle jest przycinany do obszaru pola treści elementu, np.:

border: 5px dashed lightpink;
background-clip: content-box;
padding: 20px;

Efekt:

text

Ta wartość powoduje, że obraz tła elementu jest widoczny tylko w obszarze zajmowanym przez tekst znajdujący się w treści tego elementu. To oznacza, że można go zobaczyć tylko wtedy, gdy ten tekst jest przynajmniej częściowo przezroczysty. Ta wartość pozwala osiągnąć bardzo ciekawe efekty wizualne, np. dzięki użyciu gradientów:

border: 5px dashed lightpink;
background-image: linear-gradient(to right, red, green, blue, pink, yellow);
color: transparent;
background-clip: text;

Efekt:

Zastosowanie

Własność CSS background-clip ma zastosowanie do wszystkich elementów HTML.

Podsumowanie