background-clip

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die background-clip CSS Eigenschaft legt fest, ob der Hintergrund eines Elements sich unterhalb seiner 'border box', 'padding box' oder 'content box' erstreckt.

Probieren Sie es aus

Der Hintergrund wird immer hinter dem Rahmen gezeichnet, daher hat background-clip: border-box nur eine visuelle Wirkung, wenn der Rahmen teilweise undurchsichtig oder transparente oder teilweise undurchsichtige Bereiche aufweist. Auch die Eigenschaft background-clip: text hat wenig bis keine visuelle Wirkung, wenn der Text vollständig oder teilweise undurchsichtig ist.

Hinweis: Da das Wurzelelement einen anderen Hintergrund-Malbereich hat, hat die Eigenschaft background-clip keine Wirkung, wenn sie für dieses angegeben wird. Siehe "The backgrounds of special elements."

Hinweis: Für Dokumente, deren Wurzelelement ein HTML-Element ist: Wenn der berechnete Wert von background-image auf dem Wurzelelement none ist und seine background-color transparent ist, müssen Benutzeragenten stattdessen die berechneten Werte der background-Eigenschaften von diesem Element auf das erste HTML <body> Kind-Element übertragen. Die tatsächlich verwendeten Werte der background-Eigenschaften dieses <body>-Elements sind ihre Initialwerte, und die übertragenen Werte werden so behandelt, als ob sie auf dem Wurzelelement angegeben wären. Es wird empfohlen, dass Autoren von HTML-Dokumenten den Canvas-Hintergrund für das <body>-Element anstelle des HTML-Elements angeben.

Syntax

css
/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
background-clip: border-area;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: revert;
background-clip: revert-layer;
background-clip: unset;

Werte

border-box

Der Hintergrund erstreckt sich bis zum äußeren Rand des Rahmens (aber unterhalb des Rahmens in der z-Ordnung).

padding-box

Der Hintergrund erstreckt sich bis zum äußeren Rand des Abstands. Kein Hintergrund wird unter dem Rahmen gezeichnet.

content-box

Der Hintergrund wird innerhalb der (zur Inhalt-Box beschnittenen) Inhalt-Box gemalt.

text

Der Hintergrund wird innerhalb des Vordergrundtexts gemalt (zum Text beschnitten).

border-area

Der Hintergrund wird innerhalb des Bereichs gemalt, der durch den Rahmen bemalt wird, wobei border-width und border-style berücksichtigt werden, jedoch jede durch border-color eingeführte Transparenz ignoriert wird.

Barrierefreiheit

Wenn Sie background-clip: text verwenden, überprüfen Sie, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der Farbe des darüberliegenden Textes hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können.

Wenn das Hintergrundbild nicht geladen wird, könnte dies auch dazu führen, dass der Text nicht lesbar ist. Fügen Sie eine Fallback-background-color hinzu, um dies zu verhindern, und testen Sie ohne das Bild.

Betrachten Sie die Verwendung von Feature-Abfragen mit @supports, um die Unterstützung von background-clip: text zu testen und eine barrierefreie Alternative bereitzustellen, wo sie nicht unterstützt wird.

Formale Definition

Initialer Wertborder-box
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Berechneter Wertwie angegeben
Animationstypa repeatable list

Formale Syntax

background-clip = 
  <visual-box>#  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Beispiele

HTML

html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>
<p class="border-area">
  The background is clipped to the area painted by the border.
</p>

CSS

css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  color: rgb(0 0 0 / 20%);
}

.border-area {
  background-clip: border-area;
  border-color: transparent;
}

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# background-clip
CSS Backgrounds and Borders Module Level 4
# background-clip

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch