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 ⁨Juli 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 Border-Box, Padding-Box oder Content-Box erstreckt.

Probieren Sie es aus

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;
color: transparent;
text-shadow: none;

<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: white;
  text-shadow: 2px 2px black;
  padding: 20px;
  border: 10px dashed #333333;
  font-size: 2em;
  font-weight: bold;
}

Der Hintergrund wird immer hinter dem Rand gezeichnet, daher hat background-clip: border-box nur dann einen visuellen Effekt, wenn der Rand teilweise undurchsichtig oder transparente oder teilweise transparente Bereiche hat. Auch hat die Eigenschaft background-clip: text kaum 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 angegeben 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 dessen 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 der background-Eigenschaften dieses <body>-Elements sind ihre Anfangswerte, und die übernommenen Werte werden behandelt, als ob sie auf dem Stammelement angegeben wären. Es wird empfohlen, dass Autoren von HTML-Dokumenten den Canvas-Hintergrund für das <body>-Element und nicht für das HTML-Element 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 zur Außenkante des Randes (aber unterhalb des Randes in der Z-Ordnung).
padding-box: Der Hintergrund erstreckt sich bis zur Außenkante des Paddings. Es wird kein Hintergrund unter dem Rand gezeichnet.
content-box: Der Hintergrund wird innerhalb der Content-Box (zugeschnitten auf diesen Bereich) gezeichnet.
text: Der Hintergrund wird innerhalb des Vordergrundtextes (zugeschnitten auf diesen Bereich) gezeichnet.
border-area: Der Hintergrund wird innerhalb des Bereichs gezeichnet, der vom Rand gezeichnet wird, und berücksichtigt border-width und border-style, ignoriert jedoch jegliche Transparenz, die durch border-color eingeführt wird.

Barrierefreiheit

Wenn Sie background-clip: text verwenden, überprüfen Sie, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der darüber platzierten Textfarbe hoch genug ist, damit Personen mit Sehschwächen den Inhalt der Seite lesen können.

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

Berücksichtigen Sie die Verwendung von Feature-Abfragen mit @supports, um die Unterstützung von background-clip: text zu testen und bieten Sie eine zugängliche Alternative, falls es nicht unterstützt wird.

Formale Definition

Anfangswert	`border-box`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	a repeatable list

Formaler Syntax

background-clip = 
  <bg-clip>#  

<bg-clip> = 
  <visual-box>             |
  [ border-area || text ]  

<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

Die clip-path Eigenschaft erstellt eine Clip-Region, die definiert, welcher Teil eines gesamten Elements angezeigt werden soll.
Hintergrund-Eigenschaften: background, background-color, background-image, background-origin
Einführung in das CSS-Box-Modell

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden