Background-clip - CSS-Tricks

Anonim

background-clip pozwala kontrolować, jak daleko obraz tła lub kolor wykracza poza dopełnienie lub zawartość elementu.

.frame ( background-clip: padding-box; )

Wartości

  • border-boxjest wartością domyślną. Pozwala to na rozciągnięcie tła aż do zewnętrznej krawędzi granicy elementu.
  • padding-box przycina tło na zewnętrznej krawędzi wypełnienia elementu i nie pozwala mu sięgać do krawędzi.
  • content-boxprzycina tło na krawędzi pola treści.
  • inheritstosuje background-clipustawienie rodzica do wybranego elementu.

Demos

background-clip najlepiej wyjaśnić w akcji, dlatego przygotowaliśmy dwa dema, aby pokazać, jak to działa.

W pierwszej wersji demonstracyjnej każdy element div zawiera jeden akapit. Akapit jest treścią div. Każdy element div ma żółte tło i 5-pikselową, półprzezroczystą jasnoniebieską obwódkę.

Zobacz klip tła pióra autorstwa CSS-Tricks (@ css-tricks) na CodePen.

Domyślnie lub przy background-clip: border-boxustawieniu żółte tło rozciąga się aż do zewnętrznej krawędzi obramowania. Zwróć uwagę, jak obramowanie wygląda na zielone z powodu żółtego tła pod nią.

Po background-clipzmianie na padding-box, kolor tła zatrzymuje się tam, gdzie kończy się wypełnienie elementu. Zwróć uwagę, że obramowanie jest niebieskie, ponieważ tło nie może spływać do obramowania.

W background-clip: content-boxprzypadku kolor tła dotyczy tylko zawartości elementu div, w tym przypadku pojedynczego elementu akapitu. Wypełnienie i obramowanie elementu div nie mają koloru tła. Ale jest jeden mały szczegół, o którym warto wspomnieć: kolor rozciąga się na margines treści. Sprawdź różnice między pierwszym a drugim przykładem z content-box.

W pierwszym content-boxprzykładzie domyślne marginesy przeglądarki są stosowane do akapitu, a klipy tła po marginesie. W drugim przykładzie margines jest ustawiony na 0 w CSS, a tło jest obcinane na krawędzi tekstu.

Następna interaktywna prezentacja background-clipz obrazem tła. Zawartość tego demo to mniejszy pusty div.

Zobacz interaktywny przykład klipu tła pióra autorstwa Timothy'ego Millera (@tjacobdesign) na CodePen.

To demo ma również zastosowanie background-size: coveri background-repeat: no-repeatoprócz background-clipsterowania obrazem tła, który w przeciwnym razie powtarzałby się do wycięcia.

Tekst

Istnieje wersja z prefiksem dostawcy, która działa w przypadku przycinania tła do tekstu. Aby zobaczyć, jak działa, tekst również musi być przejrzysty. Na szczęście istnieje inna właściwość koloru tekstu z przedrostkiem dostawcy, która może skutecznie zastąpić color, dzięki czemu jest bezpieczna w użyciu, ponieważ może mieć rezerwę:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Obsługują to Firefox, Chrome i Safari.

Zobacz
tekst Pen Lit autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.

Związane z

  • załącznik w tle
  • kolor tła
  • zdjęcie w tle
  • pochodzenie tła
  • pozycja tła
  • powtarzanie tła
  • background-size

Więcej zasobów

  • background-clip w specyfikacji CSS3
  • background-clip w MDN
  • Model pudełkowy CSS

Wsparcie przeglądarki

Wszystko jasne!

Chrom Safari Firefox Opera TO ZNACZY Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Pracuje