background-clip
Ustala, do którego obszaru elementu sięga tło, łącznie z efektem tła w tekście.
- Wartość domyślna
border-box- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundClip = "padding-box"
Przykład
#.gradient-title {
background: linear-gradient(90deg, #a78bfa, #38bdf8);
background-clip: text;
color: transparent;
}<h2 class="gradient-title" style="margin: 0; font-size: 30px; background: linear-gradient(90deg, #a78bfa, #38bdf8); background-clip: text; -webkit-background-clip: text; color: transparent;">Dokumentacja CSS</h2>Definicja i zastosowanie
#Właściwość background-clip przycina tło do wybranego obszaru. border-box (domyślnie) rysuje tło także pod obramowaniem, padding-box kończy je na wewnętrznej krawędzi obramowania, a content-box tylko pod treścią.
Najbardziej efektowna wartość to text: tło widać wyłącznie w kształcie liter. W połączeniu z gradientem i przezroczystym kolorem tekstu daje popularny efekt kolorowego napisu.
Różnicę między border-box a padding-box najlepiej widać przy obramowaniu przerywanym lub półprzezroczystym.
Składnia
#background-clip: border-box | padding-box | content-box | text;Wartości
#- Tło sięga pod obramowanie.
- Tło kończy się na obramowaniu.
- Tło tylko pod treścią, bez paddingu.
- Tło widoczne tylko w literach. Tekst musi mieć przezroczysty kolor.
Wartości w praktyce
#border-box
.demo { background-clip: border-box; }padding-box
.demo { background-clip: padding-box; }content-box
.demo { background-clip: content-box; }text
.demo { background: linear-gradient(90deg, #f59e0b, #f43f5e, #7c3aed); background-clip: text; color: transparent; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przy tekście z tłem gradientowym ustaw też
color: transparent, inaczej kolor tekstu zakryje tło. - Starsze przeglądarki wymagały
-webkit-background-clip: text. Warto dodać tę linię obok, jeśli zależy Ci na zgodności wstecz.
Powiązane hasła
#- backgroundSkrót ustawiający wszystkie właściwości tła w jednej deklaracji.
- background-originUstala, od którego obszaru elementu liczona jest pozycja obrazu tła.
- background-imageUstawia obraz lub gradient jako tło elementu.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
Widzisz błąd albo brakuje przykładu? Napisz do nas.