background-clip

background-clip legt fest, wie weit ein Hintergrundbild oder eine Hintergrundfarbe über den Rahmen oder den Inhalt eines Elements hinausgeht.

.frame {
  background-clip: padding-box;
}

Werte

• border-box ist der Standardwert. Dies ermöglicht es dem Hintergrund, sich bis zur äußeren Kante des Rahmens des Elements zu erstrecken.
• padding-box beschneidet den Hintergrund an der äußeren Kante des Innenrands des Elements und lässt ihn nicht in den Rahmen hineinragen.
• content-box schneidet den Hintergrund am Rand der Inhaltsbox ab.
• inherit wendet die background-clip-Einstellung des Elternteils auf das ausgewählte Element an.

Demos

background-clip lässt sich am besten in Aktion erklären, daher haben wir zwei Demos erstellt, um zu zeigen, wie es funktioniert.

In der ersten Demo hat jedes div einen Absatz darin. Der Absatz ist der Inhalt des div. Jedes div hat einen gelben Hintergrund und einen 5 Pixel breiten, halbtransparenten hellblauen Rahmen.

Standardmäßig oder mit background-clip: border-box erstreckt sich der gelbe Hintergrund bis zur äußeren Kante des Rahmens. Beachten Sie, wie der Rahmen aufgrund des darunter liegenden gelben Hintergrunds grün aussieht.

Wenn background-clip auf padding-box geändert wird, stoppt die Hintergrundfarbe dort, wo der Innenrand des Elements endet. Beachten Sie, dass der Rahmen blau ist, da der Hintergrund nicht in den Rahmen bluten darf.

Mit background-clip: content-box wendet sich die Hintergrundfarbe nur auf den Inhalt des div an, in diesem Fall das einzelne Absatz-Element. Der Innenrand und der Rahmen des div haben keine Hintergrundfarbe. Aber es gibt ein kleines Detail, das erwähnenswert ist: Die Farbe erstreckt sich tatsächlich in den Außenabstand des Inhalts. Sehen Sie sich die Unterschiede zwischen dem ersten und zweiten Beispiel mit content-box an.

Im ersten content-box-Beispiel werden die Standard-Außenabstände des Browsers auf den Absatz angewendet, und der Hintergrund wird nach dem Außenabstand abgeschnitten. Im zweiten Beispiel wird der Außenabstand in CSS auf 0 gesetzt, und der Hintergrund wird am Rand des Textes abgeschnitten.

Diese nächste interaktive Demo zeigt background-clip mit einem Hintergrundbild. Der Inhalt dieser Demo ist ein kleineres, leeres div.

Diese Demo verwendet zusätzlich zu background-clip auch background-size: cover und background-repeat: no-repeat, um das Hintergrundbild zu steuern, das sich sonst bis zum Beschneiden wiederholen würde.

Text

Es gibt eine herstellerspezifische Version davon, die zum Beschneiden eines Hintergrunds an Text verwendet werden kann. Um dies funktionieren zu sehen, muss der Text auch transparent sein. Glücklicherweise gibt es eine weitere herstellerspezifische Texteigenschaft, die color effektiv überschreiben kann, sodass sie sicher verwendet werden kann, 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.

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
9+	12+	22+	21+	5.1+	15+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
Alle	Alle	Alle	3+	62+

Weitere Informationen

Verwandte Eigenschaften