w3docs logo

CSS-Eigenschaft background-clip

Die CSS-Eigenschaft background-clip gibt an, wie weit die Hintergrundfarbe und das Hintergrundbild vom Element entfernt sein sollen. Wenn das Element background-image oder background-color hat, hat diese Eigenschaft nur dann einen visuellen Effekt, wenn der Rand transparente Bereiche oder teilweise opake Bereiche hat; andernfalls zeigt der Rand den Unterschied.

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example{
      border: 3px solid #666;
      padding: 15px;
      background: #ccc;
      background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft background-clip</h2>
    <p>Hier wurde der Wert "content-box" verwendet.</p>
    <div id="example">
      <p>Der Hintergrund erstreckt sich bis zum Rand der Inhaltsbox.</p>
    </div>
  </body>
</html>

Im folgenden Beispiel beachten Sie bitte die Unterschiede zwischen den Werten "padding-box" und "border-box".

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ein Beispiel für die Eigenschaft background-clip</h2>
    <p>Hier wurde background-clip auf "border-box" (es ist sein Standardwert) gesetzt.</p>
    <div id="example1">
      <p>Der Hintergrund erstreckt sich hinter dem Rand.</p>
    </div>
    <p>Hier ist background-clip auf "padding-box" gesetzt.</p>
    <div id="example2">
      <p>Der Hintergrund erstreckt sich bis zur Innenkante des Randes.</p>
    </div>
    </div>
  </body>
</html>

In diesem Beispiel wird der Hintergrund innerhalb des Vordergrundtextes gemalt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example {
      border: 3px dashed #1ebf42;
      padding: 15px;
      background: #1c87c9;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft background-clip</h2>
    <p>Hier ist background-clip auf "text" gesetzt.</p>
    <div id="example">
      <p>Der Hintergrund wird innerhalb des Vordergrundtextes gemalt.</p>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
border-box Der Hintergrund erscheint hinter dem Rand. Das ist der Standardwert.
padding-box Der Hintergrund erscheint innerhalb des Rahmens.
content-box Der Hintergrund erstreckt sich bis zum Rand der Inhaltsbox.
text Der Hintergrund wird innerhalb des Vordergrundtextes platziert.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
15.0+ 4.0+
3.6 -moz- 		7.0+ 11.5+
10.1 -o-

Übe dein Wissen

Was sind die möglichen Werte für die CSS-Eigenschaft 'Background-clip'?
Finden Sie das nützlich?