Hintergrund Zuschnitt

Die CSS-Eigenschaft background-clip bestimmt, wo genau der Hintergrund eines Elements gezeichnet wird. Standardmäßig wird der Hintergrund über den Padding- und Content-Bereich hinaus gezeichnet, aber background-clip erlaubt uns, dies zu steuern.

.container {
  background-clip: text;
}

Eigenschaft	Erklärung
border-box (Standard)	Hintergrund wird bis zum äußeren Rand des Rahmens gezeichnet. Inklusive Content, Padding und Border.
padding-box	Hintergrund wird nur bis zum Rand des Paddings gezeichnet. Die Border bleibt transparent gegenüber dem Hintergrund.
content-box	Hintergrund wird nur im Inhaltsbereich angezeigt. Padding und Border bleiben transparent.
text	Hintergrund wird nur auf den Text selbst angewendet. Sehr nützlich für Farbverläufe innerhalb von Text.

Bemerkung

Der nützlichste Eigenschaftswert von background-clip ist in der Praxis text, da er ermöglicht, Texte mit Farbverläufen oder Bildern zu füllen – ein moderner Effekt, der ohne zusätzliche HTML-Elemente auskommt. Die anderen Werte (border-box, padding-box, content-box) sind technisch wichtig, werden jedoch in der Regel nur selten bewusst eingesetzt und daher hier nicht weiter vertieft.

.container {
  background-image: url('https://bilder.philipperck.de/css/bg-image1.jpg');
  background-size: cover;
  background-position: center center;
  background-clip: text;
}

h1 {
  text-align: center;
  font-size: 89px;
  color: transparent;
}

CSS