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
-Eigenschaft von CSS legt fest, ob der Hintergrund eines Elements sich unterhalb seines Rand-Kastens, Innenabstands-Kastens oder Inhalts-Kastens 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 #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 oder transparent oder teilweise transparente Bereiche hat. Auch die Eigenschaft background-clip: text
hat wenig bis keinen visuellen Effekt, 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 darauf angegeben wird. Siehe "Die Hintergründe spezieller Elemente."
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
, müssen Benutzeragenten stattdessen die berechneten Werte der background
-Eigenschaften vom ersten HTML-<body>
-Kind-Element 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 Wurzelelement angegeben wären. Es wird empfohlen, dass Autoren von HTML-Dokumenten den Hintergrund der Leinwand für das <body>
-Element statt für das HTML-Element festlegen.
Syntax
/* 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ßenseite des Rahmens (aber unterhalb des Rahmens in der Z-Reihenfolge).
padding-box
-
Der Hintergrund erstreckt sich bis zur Außenseite des Innenabstands. Kein Hintergrund wird unterhalb des Rahmens gezeichnet.
content-box
-
Der Hintergrund wird innerhalb des Inhaltskastens gemalt (darauf zugeschnitten).
text
-
Der Hintergrund wird innerhalb des Vordergrundtextes gemalt (darauf zugeschnitten).
border-area
-
Der Hintergrund wird innerhalb des durch den Rahmen gemalten Bereichs gemalt (darauf zugeschnitten), wobei
border-width
undborder-style
berücksichtigt, aber jede durchborder-color
eingeführte Transparenz ignoriert wird.
Barrierefreiheit
Bei Verwendung von background-clip: text
überprüfen Sie, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der Farbe des darüber liegenden Textes hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können.
Falls das Hintergrundbild nicht geladen wird, könnte dies ebenfalls dazu führen, dass der Text unlesbar wird. Fügen Sie eine alternative background-color
hinzu, um dies zu verhindern, und testen Sie ohne das Bild.
Erwägen Sie die Verwendung von Feature-Abfragen mit @supports
, um die Unterstützung von background-clip: text
zu testen und eine zugängliche Alternative bereitzustellen, wo dies 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 |
Formale Syntax
Beispiele
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
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 Eigenschaft
clip-path
erzeugt eine Zuschneide-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-Boxmodell