Hintergrund-Clip - CSS-Tricks

Anonim

background-clip Mit dieser Option können Sie steuern, wie weit ein Hintergrundbild oder eine Hintergrundfarbe über die Auffüllung oder den Inhalt eines Elements hinausgeht.

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

Werte

  • border-boxist der Standardwert. Dadurch kann sich der Hintergrund bis zur Außenkante des Elementrahmens erstrecken.
  • padding-box schneidet den Hintergrund am äußeren Rand der Polsterung des Elements ab und lässt ihn nicht in den Rand hineinragen.
  • content-boxschneidet den Hintergrund am Rand des Inhaltsfelds ab.
  • inheritWendet die background-clipEinstellung des übergeordneten Elements auf das ausgewählte Element an.

Demos

background-clip wird am besten in Aktion erklärt, daher haben wir zwei Demos zusammengestellt, um zu zeigen, wie es funktioniert.

In der ersten Demo enthält jedes Div einen Absatz. Der Absatz ist der Inhalt des Div. Jedes Div hat einen gelben Hintergrund und einen halbtransparenten hellblauen Rand mit 5 Pixeln.

Siehe den Pen-Hintergrundclip von CSS-Tricks (@ css-Tricks) auf CodePen.

Standardmäßig oder mit background-clip: border-boxSet erstreckt sich der gelbe Hintergrund bis zum äußeren Rand des Rahmens. Beachten Sie, wie der Rand aufgrund des gelben Hintergrunds grün aussieht.

Wenn das background-clipin geändert wird padding-box, stoppt die Hintergrundfarbe dort, wo die Auffüllung des Elements endet. Beachten Sie, dass der Rand blau ist, da der Hintergrund nicht in den Rand bluten darf.

Bei background-clip: content-boxbezieht sich die Hintergrundfarbe nur auf den Inhalt des div, in diesem Fall auf das einzelne Absatzelement. Die Polsterung und der Rand des Div haben keine Hintergrundfarbe. Es gibt jedoch ein kleines Detail, das es zu erwähnen gilt: Die Farbe reicht bis in den Rand des Inhalts. Überprüfen Sie die Unterschiede zwischen dem ersten und dem zweiten Beispiel mit content-box.

Im ersten content-boxBeispiel werden die Standardränder des Browsers auf den Absatz und die Hintergrundclips nach dem Rand angewendet. Im zweiten Beispiel wird der Rand im CSS auf 0 gesetzt und der Hintergrund am Rand des Textes abgeschnitten.

Diese nächste interaktive Show background-clipmit einem Hintergrundbild. Der Inhalt dieser Demo ist eine kleinere leere Div.

Sehen Sie sich das interaktive Beispiel für den Pen-Hintergrundclip von Timothy Miller (@tjacobdesign) auf CodePen an.

Diese Demo gilt auch background-size: coverund background-repeat: no-repeatzusätzlich zur background-clipSteuerung des Hintergrundbildes, das sich sonst bis zum Abschneiden wiederholen würde.

Text

Es gibt eine vom Hersteller vorangestellte Version davon, mit der ein Hintergrund in Text geschnitten werden kann. Damit dies funktioniert, muss der Text auch transparent sein. Glücklicherweise gibt es eine andere vom Hersteller vorangestellte Textfarbeneigenschaft, die effektiv überschrieben werden colorkann und deren Verwendung sicher ist, da sie einen Fallback haben kann:

.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 und Safari unterstützen dies.

Siehe den Pen
Lit-Text von Chris Coyier (@chriscoyier)
auf CodePen.

verbunden

  • Hintergrund-Anhang
  • Hintergrundfarbe
  • Hintergrundbild
  • Hintergrundherkunft
  • Hintergrundposition
  • Hintergrund Wiederholung
  • Hintergrundgröße

Mehr Ressourcen

  • background-clip in der CSS3-Spezifikation
  • Hintergrund-Clip bei MDN
  • Das CSS-Box-Modell

Browser-Unterstützung

Alles klar!

Chrom Safari Feuerfuchs Oper IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Funktioniert