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.

* Some parts of this feature may have varying levels of support.

Die background-clip CSS Eigenschaft legt fest, ob der Hintergrund eines Elements sich unterhalb seines Rahmenkastens, Polsterungskastens oder Inhaltskastens erstreckt.

Probieren Sie es aus

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;
color: transparent;

<section id="default-example">
  <div id="example-element">This is the content of the element.</div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/leopard.jpg");
  color: #d73611;
  text-shadow: 2px 2px black;
  padding: 20px;
  border: 10px dashed #333;
  font-size: 2em;
  font-weight: bold;
}

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

Hinweis: Da das Stammelement einen anderen Hintergrundmalbereich hat, hat die background-clip Eigenschaft keine Wirkung, wenn sie darauf spezifiziert wird. Siehe "Die Hintergründe spezieller Elemente."

Hinweis: Für Dokumente, deren Stammelement ein HTML-Element ist: Wenn der berechnete Wert von background-image auf dem Stammelement none ist und seine background-color transparent ist, müssen Benutzeragenten stattdessen die berechneten Werte der background Eigenschaften vom ersten HTML <body> Kindelement dieses Elements übernehmen. Die verwendeten Werte dieser <body> Element-Hintergrundeigenschaften sind ihre Initialwerte, und die übernommenen Werte werden behandelt, als ob sie auf dem Stammelement spezifiziert wären. Es wird empfohlen, dass Autoren von HTML-Dokumenten den Leinwandhintergrund für das <body> Element anstelle des HTML-Elements spezifizieren.

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 in der Z-Ordnung unterhalb des Rahmens).

padding-box

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

content-box

Der Hintergrund wird innerhalb (abgeschnitten zum) des Inhaltskastens gemalt.

text

Der Hintergrund wird innerhalb (abgeschnitten zum) des Vordergrundtexts gemalt.

border-area

Der Hintergrund wird innerhalb (abgeschnitten zum) des vom Rahmen gemalten Bereichs gemalt, wobei border-width und border-style berücksichtigt werden, aber jede durch border-color eingeführte Transparenz ignoriert wird.

Barrierefreiheit

Beim Verwenden von background-clip: text, stellen Sie sicher, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der Farbe des darüber liegenden Textes hoch genug ist, damit Menschen mit Sehschwächen den Inhalt der Seite lesen können.

Falls das Hintergrundbild nicht lädt, könnte das auch dazu führen, dass der Text unlesbar wird. Fügen Sie einen Fallback background-color hinzu, um dies zu verhindern, und testen Sie ohne das Bild.

Erwägen Sie, Feature-Abfragen mit @supports zu verwenden, um die Unterstützung von background-clip: text zu testen und eine zugängliche Alternative bereitzustellen, wo es nicht unterstützt wird.

Formale Definition

Anfangswertborder-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 Module Level 4
# background-clip

Browser-Kompatibilität

Siehe auch