Baggrund-klip - CSS-tricks

Anonim

background-clip giver dig mulighed for at kontrollere, hvor langt et baggrundsbillede eller en farve strækker sig ud over elementets polstring eller indhold.

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

Værdier

  • border-boxer standardværdien. Dette gør det muligt for baggrunden at strække sig helt til den udvendige kant af elementets kant.
  • padding-box klipper baggrunden ved den udvendige kant af elementets polstring og lader den ikke strække sig ind i grænsen.
  • content-boxklipper baggrunden i kanten af ​​indholdsfeltet.
  • inheritanvender background-clipindstillingen af ​​den overordnede til det valgte element.

Demoer

background-clip forklares bedst i aktion, så vi har sammensat to demoer for at vise, hvordan det fungerer.

I den første demo har hver div et afsnit inde. Afsnittet er div's indhold. Hver div har en gul baggrund og en 5 pixel, semi-gennemsigtig lyseblå kant.

Se pennens baggrundsklip fra CSS-Tricks (@ css-tricks) på CodePen.

Som standard eller med background-clip: border-boxsæt strækker den gule baggrund sig helt ud til kanten af ​​grænsen. Læg mærke til, hvordan grænsen ser ud som den er grøn på grund af den gule baggrund under den.

Når den background-clipændres til padding-box, stopper baggrundsfarven, hvor elementets polstring slutter. Bemærk, at grænsen er blå, fordi baggrunden ikke får lov til at bløde ind i grænsen.

Med background-clip: content-boxgælder baggrundsfarven kun for div-indholdet, i dette tilfælde det enkelte afsnit-element. Div's polstring og kant har ikke baggrundsfarve. Men der er en lille detalje, der er værd at nævne: farven strækker sig ind i indholdets margen. Tjek forskellene mellem det første og det andet eksempel med content-box.

I det første content-boxeksempel anvendes browserens standardmargener til afsnittet, og baggrundsklipene efter margenen. I det andet eksempel er margenen indstillet til 0 i CSS, og baggrunden klippes i kanten af ​​teksten.

Denne næste interaktive viser background-clipmed baggrundsbillede. Indholdet i denne demo er en mindre tom div.

Se det interaktive eksempel på baggrund af pennen på baggrund af Timothy Miller (@tjacobdesign) på CodePen.

Denne demo gælder også background-size: coverog background-repeat: no-repeatud over at background-clipkontrollere baggrundsbilledet, som ellers ville gentage indtil klipning.

Tekst

Der er en leverandørpræfikset version af denne, der fungerer til at klippe en baggrund til tekst. For at se det arbejde, skal teksten også være gennemsigtig. Heldigvis er der en anden sælgerpræfikset tekstfarveegenskab, der effektivt kan tilsidesætte color, hvilket gør det sikkert at bruge, da det kan have en tilbagefald:

.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 og Safari understøtter dette.

Se Pen
Lit-teksten af ​​Chris Coyier (@chriscoyier)
på CodePen.

Relaterede

  • baggrund-vedhæftet fil
  • baggrundsfarve
  • baggrundsbillede
  • baggrund-oprindelse
  • baggrund-position
  • baggrund-gentagelse
  • baggrundsstørrelse

Flere ressourcer

  • background-clip i CSS3-specifikationen
  • baggrundsklip ved MDN
  • CSS Box Model

Browsersupport

Fri bane!

Chrome Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10.5+ 9+ 4.1+ Arbejder