Fundal-clip - CSS-Tricks

Anonim

background-clip vă permite să controlați cât de departe se extinde o imagine de fundal sau o culoare dincolo de umplerea sau conținutul unui element.

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

Valori

  • border-boxeste valoarea implicită. Acest lucru permite fundalului să se extindă până la marginea exterioară a chenarului elementului.
  • padding-box clipează fundalul la marginea exterioară a căptușelii elementului și nu-l lasă să se extindă în margine.
  • content-boxclipuri fundal la marginea casetei de conținut.
  • inheritaplică background-clipsetarea părintelui elementului selectat.

Demonstrații

background-clip este cel mai bine explicat în acțiune, așa că am reunit două demonstrații pentru a arăta cum funcționează.

În prima demonstrație, fiecare div are un paragraf în interiorul său. Paragraful este conținutul div. Fiecare div are un fundal galben și o margine albastră deschisă semi-transparentă de 5 pixeli.

Vedeți clipul de fundal Pen de CSS-Tricks (@ css-tricks) pe CodePen.

În mod implicit sau cu background-clip: border-boxset, fundalul galben se extinde până la marginea exterioară a chenarului. Observați cum arată marginea ca fiind verde din cauza fundalului galben de sub ea.

Când background-clipse schimbă în padding-box, culoarea de fundal se oprește acolo unde se termină umplutura elementului. Observați că granița este albastră, deoarece fundalul nu are voie să curgă în graniță.

Cu background-clip: content-box, culoarea de fundal se aplică numai conținutului divului, în acest caz elementul de paragraf unic. Căptușeala și marginea divului nu au o culoare de fundal. Dar, există un mic detaliu demn de menționat: culoarea se extinde până la marginea conținutului. Verificați diferențele dintre primul și al doilea exemplu cu content-box.

În primul content-boxexemplu, marginile implicite ale browserului sunt aplicate paragrafului, iar clipurile de fundal după margine. În al doilea exemplu, marja este setată la 0 în CSS, iar fundalul este tăiat la marginea textului.

Următorul spectacol interactiv background-clipcu o imagine de fundal. Conținutul acestei demonstrații este un div gol mai mic.

Vedeți exemplul interactiv Pen background-clip de Timothy Miller (@tjacobdesign) pe CodePen.

Această demonstrație se aplică background-size: coverși, background-repeat: no-repeatîn plus față background-clipde controlul imaginii de fundal, care altfel s-ar repeta până la decupare.

Text

Există o versiune prefixată de furnizor care funcționează pentru tăierea unui fundal la text. Pentru a vedea acea lucrare, textul va trebui, de asemenea, să fie transparent. Din fericire, există o altă proprietate de culoare a textului prefixată de furnizor care poate suprascrie efectiv color, făcându-l sigur în utilizare, deoarece poate avea o rezervă:

.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 acceptă acest lucru.

Vedeți textul Pen
Lit de Chris Coyier (@chriscoyier)
pe CodePen.

Legate de

  • atașament de fundal
  • culoare de fundal
  • imagine de fundal
  • fundal-origine
  • fundal-poziție
  • fundal-repetare
  • dimensiunea fundalului

Mai multe resurse

  • background-clip în spec. CSS3
  • background-clip la MDN
  • Modelul CSS Box

Suport pentru browser

Toate clare!

Crom Safari Firefox Operă IE Android iOS
1+ 3+ 4+ 10.5+ 9+ 4.1+ Lucrări