Bakgrund-klipp - CSS-tricks

Anonim

background-clip låter dig styra hur långt en bakgrundsbild eller färg sträcker sig bortom elementets stoppning eller innehåll.

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

Värden

  • border-boxär standardvärdet. Detta gör att bakgrunden kan sträcka sig hela vägen till ytterkanten av elementets kant.
  • padding-box klippar bakgrunden vid ytterkanten av elementets stoppning och låter den inte sträcka sig in i kanten.
  • content-boxklippar bakgrunden i kanten av innehållsrutan.
  • inherittillämpar background-clipinställningen för föräldern på det valda elementet.

Demos

background-clip förklaras bäst i aktion, så vi har sammanställt två demos för att visa hur det fungerar.

I den första demo har varje div ett stycke inuti. Avsnittet är div-innehållet. Varje div har en gul bakgrund och en 5-pixel, halvgenomskinlig ljusblå kant.

Se Penns bakgrundsklipp från CSS-Tricks (@ css-tricks) på CodePen.

Som standard, eller med background-clip: border-boxset, sträcker sig den gula bakgrunden hela vägen till kantens yttre kant. Lägg märke till hur gränsen ser ut som den är grön på grund av den gula bakgrunden under den.

När den background-clipändras till padding-boxstannar bakgrundsfärgen där elementets stoppning slutar. Observera att gränsen är blå eftersom bakgrunden inte får blöda in i gränsen.

Med gäller background-clip: content-boxbakgrundsfärgen endast div-innehållet, i det här fallet det enda stycket. Div: s stoppning och kant har ingen bakgrundsfärg. Men det finns en liten detalj som är värt att nämna: färgen sträcker sig in i innehållets marginal. Kolla in skillnaderna mellan det första och det andra exemplet med content-box.

I det första content-boxexemplet tillämpas webbläsarens standardmarginaler på stycket och bakgrundsklippen efter marginalen. I det andra exemplet är marginalen inställd på 0 i CSS och bakgrunden klipps ut i kanten av texten.

Nästa interaktiva show background-clipmed en bakgrundsbild. Innehållet i denna demo är en mindre tom div.

Se Pen bakgrunds-klipp interaktiva exempel av Timothy Miller (@tjacobdesign) på CodePen.

Denna demo gäller background-size: coveroch background-repeat: no-repeatförutom att background-clipkontrollera bakgrundsbilden, som annars skulle upprepas tills klippning.

Text

Det finns en leverantörsprefixerad version av denna som fungerar för att klippa en bakgrund till text. För att se det arbetet måste texten också vara transparent. Lyckligtvis finns det en annan leverantörsfixerad textfärgegenskap som effektivt kan åsidosätta color, vilket gör det säkert att använda eftersom det kan ha en reserv:

.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 och Safari stöder detta.

Se
texten Pen Lit av Chris Coyier (@chriscoyier)
på CodePen.

Relaterad

  • bakgrundsbilaga
  • bakgrundsfärg
  • bakgrundsbild
  • bakgrund-ursprung
  • bakgrundsposition
  • bakgrund-upprepa
  • bakgrundsstorlek

Fler resurser

  • background-clip i CSS3-specifikationen
  • bakgrund-klipp på MDN
  • CSS Box-modellen

Webbläsarstöd

Allt klart!

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