Pozadina-isječak - CSS-trikovi

Anonim

background-clip omogućuje vam kontrolu koliko se pozadinska slika ili boja proteže dalje od unosa ili sadržaja elementa.

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

Vrijednosti

  • border-boxje zadana vrijednost. To omogućuje da se pozadina proteže sve do vanjskog ruba obruba elementa.
  • padding-box izrezuje pozadinu na vanjskom rubu obloge elementa i ne dopušta mu da se proteže u obrub.
  • content-boxisječe pozadinu na rubu okvira za sadržaj.
  • inheritprimjenjuje background-clippostavku roditelja na odabrani element.

Demo

background-clip najbolje je objasniti na djelu, pa smo sastavili dvije demonstracije kako bismo pokazali kako to funkcionira.

U prvom demonstracijskom dijelu svaki div ima jedan odlomak. Odlomak je sadržaj div-a. Svaki div ima žutu pozadinu i poluprozirni svijetloplavi obrub od 5 piksela.

Pogledajte pozadinski isječak olovke od CSS-Tricks (@ css-tricks) na CodePenu.

Prema zadanim postavkama ili s background-clip: border-boxpostavljenim, žuta se pozadina proteže sve do vanjskog ruba obruba. Primijetite kako obrub izgleda zeleno zbog žute pozadine ispod.

Kada background-clipse promijeni u padding-box, boja pozadine zaustavlja se tamo gdje završava udaljenost od elementa. Primijetite da je obrub plav jer pozadina ne smije procuriti u obrub.

S background-clip: content-box, boja pozadine odnosi se samo na sadržaj div-a, u ovom slučaju na jedan odlomak. Podloga i obrub div-a nemaju boju pozadine. No, postoji jedan mali detalj vrijedan spomena: boja se proteže do margine sadržaja. Provjerite razlike između prvog i drugog primjera s content-box.

U prvom content-boxprimjeru zadane margine preglednika primjenjuju se na odlomak, a pozadinske isječke nakon margine. U drugom primjeru margina je postavljena na 0 u CSS-u, a pozadina je odrezana na rubu teksta.

Sljedeća interaktivna emisija prikazuje background-clippozadinsku sliku. Sadržaj u ovoj demonstraciji manji je prazan div.

Pogledajte interaktivni primjer pozadinskog isječka olovke Timothyja Millera (@tjacobdesign) na CodePenu.

Ovaj demo je također vrijedi background-size: coveri background-repeat: no-repeatuz background-clipkontrolu pozadinsku sliku, koja bi inače ponoviti do ometanja.

Tekst

Postoji verzija s prefiksom dobavljača koja radi za isjecanje pozadine u tekst. Da bi se vidio taj rad, tekst će također morati biti transparentan. Srećom, postoji još jedno svojstvo boje teksta s prefiksom dobavljača koje može učinkovito nadjačati color, čineći ga sigurnim za upotrebu jer može imati rezervni učinak :

.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 i Safari to podržavaju.

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

Povezano

  • pozadina-prilog
  • boja pozadine
  • pozadinska slika
  • podrijetlo podrijetla
  • pozadinski položaj
  • pozadina-ponavljanje
  • veličina pozadine

Više resursa

  • background-clip u specifikaciji CSS3
  • isječak u pozadini na MDN
  • Model CSS Box

Podrška preglednika

Sve jasno!

Krom Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Djela