Posnetek za ozadje - CSS-triki

Anonim

background-clip vam omogoča nadzor nad tem, kako daleč se slika ozadja ozadja razteza preko oblazinjenja ali vsebine elementa.

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

Vrednote

  • border-boxje privzeta vrednost. To omogoča, da se ozadje razširi vse do zunanjega roba obrobe elementa.
  • padding-box odreže ozadje na zunanjem robu oblazinjenja elementa in ne pusti, da sega v rob.
  • content-boxizreže ozadje na robu polja z vsebino.
  • inherituporabi background-clipnastavitev nadrejenega za izbrani element.

Predstavitve

background-clip je najbolje razložiti v akciji, zato smo sestavili dve predstavitvi, ki prikazujeta, kako deluje.

V prvi predstavitvi ima vsak div en odstavek. Odstavek je vsebina divja. Vsak div ima rumeno ozadje in polprozorno svetlo modro obrobo s 5 slikovnimi pikami.

Oglejte si posnetek za ozadje pisala CSS-Tricks (@ css-tricks) na CodePen.

Privzeto ali z background-clip: border-boxnastavitvijo se rumeno ozadje razteza vse do zunanjega roba obrobe. Opazite, kako je obroba videti rumena zaradi rumenega ozadja pod njo.

Ko background-clipspremenite v padding-box, se barva ozadja ustavi tam, kjer se oblazinjenje elementa konča. Upoštevajte, da je obroba modra, ker ozadje ne sme odtekati v obrobo.

S background-clip: content-box, barva ozadja se nanaša samo na vsebino div je v tem primeru edini odstavek element. Oblazinjenje in obroba divja nimata barve ozadja. Vendar je treba omeniti še eno podrobnost: barva seže do roba vsebine. Preverite razlike med prvim in drugim primerom z content-box.

V prvem content-boxprimeru so privzeti robovi brskalnika uporabljeni za odstavek in posnetki v ozadju za robom. V drugem primeru je v CSS rob nastavljen na 0, ozadje pa je odrezano na robu besedila.

Naslednja interaktivna oddaja background-clips sliko v ozadju. Vsebina v tej predstavitvi je manjši prazen div.

Oglejte si interaktivni primer posnetka za ozadje pisala Timothyja Millerja (@tjacobdesign) na CodePen.

Ta demo velja tudi background-size: coverin background-repeat: no-repeatpoleg tega, da background-clipza nadzor nad sliko za ozadje, ki bi sicer ponovil, dokler striženjem.

Besedilo

Obstaja različica tega izdelka s predpono, ki deluje za izrezovanje ozadja v besedilo. Da bi to videli, mora biti tudi besedilo pregledno. Na srečo obstaja še ena lastnost barv besedila s predpono, ki jo lahko učinkovito preglasi color, zaradi česar je varna za uporabo, saj ima lahko nadomestno možnost:

.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; )

Firefox, Chrome in Safari to podpirajo.

Oglejte si
besedilo Pen Lit Chrisa Coyierja (@chriscoyier)
na CodePen.

Sorodno

  • ozadje-priloga
  • Barva ozadja
  • slika ozadja
  • izvor-izvor
  • položaj ozadja
  • ozadje-ponovitev
  • velikost ozadja

Več virov

  • background-clip v specifikaciji CSS3
  • posnetek v ozadju na MDN
  • Model CSS Box

Podpora za brskalnik

Vse jasno!

Chrome Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Deluje