Achtergrondclip - CSS-trucs

Anonim

background-clip laat u bepalen hoever een achtergrondafbeelding of -kleur verder gaat dan de opvulling of inhoud van een element.

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

Waarden

  • border-boxis de standaardwaarde. Hierdoor kan de achtergrond helemaal doorlopen tot aan de buitenrand van de rand van het element.
  • padding-box knipt de achtergrond aan de buitenrand van de opvulling van het element en laat deze niet doorlopen in de rand.
  • content-boxknipt de achtergrond aan de rand van het inhoudvak.
  • inheritpast de background-clipinstelling van het bovenliggende element toe op het geselecteerde element.

Demo's

background-clip kan het beste in actie worden uitgelegd, dus we hebben twee demo's samengesteld om te laten zien hoe het werkt.

In de eerste demo bevat elke div één alinea. De alinea is de inhoud van de div. Elke div heeft een gele achtergrond en een semi-transparante lichtblauwe rand van 5 pixels.

Zie de Pen-achtergrondclip van CSS-Tricks (@ css-tricks) op CodePen.

Standaard, of met background-clip: border-boxset, loopt de gele achtergrond helemaal door tot aan de buitenrand van de rand. Merk op hoe de rand eruit ziet alsof hij groen is vanwege de gele achtergrond eronder.

Wanneer de background-clipwordt gewijzigd in padding-box, stopt de achtergrondkleur waar de opvulling van het element eindigt. Merk op dat de rand blauw is omdat de achtergrond niet in de rand mag overlopen.

Met background-clip: content-boxis de achtergrondkleur alleen van toepassing op de inhoud van de div, in dit geval het enkele alinea-element. De opvulling en de rand van de div hebben geen achtergrondkleur. Maar er is een klein detail dat het vermelden waard is: de kleur loopt door tot in de marge van de inhoud. Bekijk de verschillen tussen het eerste en tweede voorbeeld met content-box.

In het eerste content-boxvoorbeeld worden de standaardmarges van de browser toegepast op de alinea en de achtergrondclips na de marge. In het tweede voorbeeld is de marge ingesteld op 0 in de CSS en wordt de achtergrond afgekapt aan de rand van de tekst.

Deze volgende interactieve shows background-clipmet een achtergrondafbeelding. De inhoud van deze demo is een kleinere lege div.

Zie het interactieve voorbeeld van de Pen-achtergrondclip door Timothy Miller (@tjacobdesign) op CodePen.

Deze demo is ook van toepassing background-size: coveren background-repeat: no-repeatnaast het background-clipbesturen van de achtergrondafbeelding, die anders zou worden herhaald tot het knippen.

Tekst

Er is een door de leverancier vooraf ingestelde versie hiervan die werkt voor het knippen van een achtergrond naar tekst. Om dat werk te zien, moet de tekst ook transparant zijn. Gelukkig is er een andere eigenschap voor tekstkleuren die door de leverancier wordt voorafgegaan, die effectief kan worden overschreven color, waardoor het veilig te gebruiken is omdat er een terugval op kan bestaan:

.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 en Safari ondersteunen dit.

Zie de Pen
Lit-tekst van Chris Coyier (@chriscoyier)
op CodePen.

Verwant

  • achtergrond-bijlage
  • Achtergrond kleur
  • achtergrond afbeelding
  • achtergrond-oorsprong
  • achtergrond-positie
  • achtergrond herhaling
  • achtergrondgrootte

Meer middelen

  • background-clip in de CSS3-specificatie
  • achtergrondclip bij MDN
  • Het CSS Box-model

Browser-ondersteuning

Alles duidelijk!

Chrome Safari Firefox Opera D.W.Z Android iOS
1+ 3+ 4+ 10.5+ 9+ 4.1+ Werken