Bakgrunn-klipp - CSS-triks

Anonim

background-clip lar deg kontrollere hvor langt et bakgrunnsbilde eller en farge strekker seg utover elementets polstring eller innhold.

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

Verdier

  • border-boxer standardverdien. Dette gjør at bakgrunnen strekker seg helt til ytterkanten av elementets kant.
  • padding-box klipper bakgrunnen på utsiden av elementets polstring og lar den ikke strekke seg inn i grensen.
  • content-boxklipper bakgrunnen på kanten av innholdsboksen.
  • inheritbruker background-clipinnstillingen til foreldrene til det valgte elementet.

Demoer

background-clip forklares best i aksjon, så vi har satt sammen to demoer for å vise hvordan det fungerer.

I den første demoen har hver div ett avsnitt inne i seg. Avsnittet er div innhold. Hver div har en gul bakgrunn og en 5 piksler, semi-gjennomsiktig lyseblå kant.

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

Som standard eller med background-clip: border-boxsett strekker den gule bakgrunnen seg helt til ytterkanten av grensen. Legg merke til hvordan grensen ser ut som den er grønn på grunn av den gule bakgrunnen under den.

Når den background-clipendres til padding-box, stopper bakgrunnsfargen der elementets polstring slutter. Legg merke til at grensen er blå fordi bakgrunnen ikke får blø inn i grensen.

Med background-clip: content-boxgjelder bakgrunnsfargen bare div-innholdet, i dette tilfellet elementet for enkeltparagraf. Divens polstring og kant har ingen bakgrunnsfarge. Men det er en liten detalj som er verdt å nevne: fargen strekker seg inn i innholdets margin. Sjekk forskjellene mellom første og andre eksempler med content-box.

I det første content-boxeksemplet brukes nettleserens standardmarger på avsnittet, og bakgrunnsklippene etter margen. I det andre eksemplet er margen satt til 0 i CSS, og bakgrunnen klippes ut i kanten av teksten.

Denne neste interaktive viser background-clipmed et bakgrunnsbilde. Innholdet i denne demoen er en mindre tom div.

Se pennets bakgrunnsklipp interaktive eksempel av Timothy Miller (@tjacobdesign) på CodePen.

Denne demoen gjelder background-size: coverog background-repeat: no-repeati tillegg til background-clipå kontrollere bakgrunnsbildet, som ellers ville gjenta til det ble klippet.

Tekst

Det er en leverandør-prefiks versjon av dette som fungerer for å klippe en bakgrunn til tekst. For å se det arbeidet, må teksten også være gjennomsiktig. Heldigvis er det en annen leverandørprefiksert tekstfargeiendom som effektivt kan overstyre color, noe som gjør det trygt å bruke, da det kan ha en tilbakebetaling:

.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 støtter dette.

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

I slekt

  • bakgrunn-vedlegg
  • bakgrunnsfarge
  • bakgrunnsbilde
  • bakgrunn-opprinnelse
  • bakgrunn-posisjon
  • bakgrunn-gjenta
  • bakgrunnsstørrelse

Flere ressurser

  • background-clip i CSS3-spesifikasjonen
  • bakgrunnsklipp på MDN
  • CSS Box Model

Nettleserstøtte

Alt klart!

Chrome Safari Firefox Opera DVS Android iOS
1+ 3+ 4+ 10.5+ 9+ 4.1+ Virker