CSS background-clip Eigenschaft

Die CSS-Eigenschaft background-clip legt fest, wie weit sich background-color und background-image innerhalb eines Elements erstrecken – also den Malbereich des Hintergrunds. Standardmäßig wird ein Hintergrund bis zur Außenkante des Rahmens gezeichnet, aber mit background-clip können Sie ihn an der Innenabstandskante, der Inhaltskante oder sogar auf die Form des Textes begrenzen.

Diese Seite erklärt, was jeder Wert bewirkt, wann er verwendet werden sollte, den Unterschied zwischen background-clip und der verwandten Eigenschaft background-origin sowie ein funktionierendes Beispiel für jeden Wert.

Wenn das Element keine background-color oder kein background-image hat, hat diese Eigenschaft keine sichtbare Wirkung.

Die Eigenschaft background-clip gehört zu den CSS3-Eigenschaften.

Wann verwenden

Eingeschränkte Hintergründe — verwenden Sie padding-box oder content-box, damit ein halbtransparenter Rahmen (z. B. ein dashed- oder dotted-Rahmen) die Seite dahinter zeigt, anstatt die Hintergrundfarbe des Elements.
Farbverlauf- oder Bildtext — kombinieren Sie background-clip: text mit einem farbenfrohen background-image und color: transparent, um Buchstabenformen mit einem Farbverlauf zu füllen.
Geschichtete Karten — kombinieren Sie mit background-origin, um zu steuern, wo ein Hintergrundbild beginnt (origin), im Vergleich dazu, wo es abgeschnitten wird (clip).

Zum Ausschneiden eines Hintergrunds auf Text ist für die Unterstützung in den meisten Browsern auch eine mit Vendor-Präfix versehene Version (-webkit-background-clip) erforderlich (siehe den Hinweis zum text-Wert unten).

Anfangswert	border-box
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.backgroundClip = "content-box";

Syntax

Syntax der CSS background-clip Eigenschaft

background-clip: border-box | padding-box | content-box | text | initial | inherit;

Beispiel der background-clip Eigenschaft:

Beispiel der CSS background-clip Eigenschaft mit dem Wert content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        border: 3px solid #666;
        padding: 15px;
        background: #ccc;
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the "content-box" value is used.</p>
    <div id="example">
      <p>The background extends to the edge of the content box.</p>
    </div>
  </body>
</html>

Probier es selbst »

Im folgenden Beispiel sehen Sie den Unterschied zwischen den Werten "padding-box" und "border-box".

Beispiel der background-clip Eigenschaft mit den Werten "padding-box" und "border-box":

Beispiel der CSS background-clip Eigenschaft mit dem Wert border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
        border: 5px dashed #666;
        padding: 15px;
        background: #1c87c9;
        background-clip: border-box;
      }
      #example2 {
        border: 5px dashed #666;
        padding: 15px;
        background: #1c87c9;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the background-clip is set to "border-box" (this is the default value).</p>
    <div id="example1">
      <p>The background extends behind the border.</p>
    </div>
    <p>Here the background-clip is set to "padding-box".</p>
    <div id="example2">
      <p>The background extends to the inside edge of the border.</p>
    </div>
  </body>
</html>

Probier es selbst »

Der text-Wert schneidet den Hintergrund so aus, dass er nur durch die Form des Vordergrunttextes sichtbar ist. Um den Hintergrund anstelle von festen Buchstaben zu sehen, setzen Sie color: transparent (oder eine halbtransparente Farbe), damit der Text selbst den Hintergrund nicht verdeckt. Dies ist die Standardtechnik für Überschriften mit Farbverlauf.

Browser-Unterstützung: Der text-Wert benötigt in den meisten Browsern noch den Präfix -webkit-background-clip: text. Deklarieren Sie immer beide Angaben -webkit-background-clip: text; und background-clip: text; zusammen, wie das folgende Beispiel zeigt.

Beispiel der background-clip Eigenschaft mit dem Wert "text":

Beispiel der CSS background-clip Eigenschaft mit dem Wert text

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        border: 3px dashed #1ebf42;
        padding: 15px;
        background: #1c87c9;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the background-clip is set to "text"</p>
    <div id="example">
      <p>The background is painted within the foreground text.</p>
    </div>
  </body>
</html>

Probier es selbst »

background-clip vs background-origin

Diese beiden Eigenschaften sind leicht zu verwechseln, da sie dieselben Box-Schlüsselwörter verwenden (border-box, padding-box, content-box):

background-origin legt fest, wo der Positionierungsbereich des Hintergrundbildes beginnt — die Referenzbox für background-position und eine background-size ohne cover.
background-clip legt fest, wo der gezeichnete Hintergrund abgeschnitten wird — alles außerhalb dieser Box wird nicht angezeigt.

Ein Hintergrund kann daher an der Rahmenkante beginnen (background-origin: border-box), aber auf die Inhaltskante beschnitten sein (background-clip: content-box), sodass der Teil über dem Innenabstand und dem Rahmen ausgeblendet wird.

Werte

Wert	Beschreibung	Ausprobieren
border-box	Der Hintergrund erscheint hinter dem Rahmen. Dies ist der Standardwert.	Ausprobieren »
padding-box	Der Hintergrund erscheint innerhalb des Rahmens.	Ausprobieren »
content-box	Der Hintergrund erstreckt sich bis zur Kante des Inhaltsbereichs.	Ausprobieren »
text	Der Hintergrund wird innerhalb des Vordergrunttextes gezeichnet.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche der folgenden Werte kann mit der Eigenschaft 'background-clip' in CSS verwendet werden?

'padding-box''content-box''border-box''shadow-box'