CSS background-clip-Eigenschaft
Die CSS-background-clip-Eigenschaft definiert den Bereich, auf den die background-color und background-image gezeichnet werden. Besitzt das Element keine background-color oder background-image, hat diese Eigenschaft keine sichtbare Auswirkung.
Die background-clip-Eigenschaft ist eine der CSS3-Eigenschaften.
Zum Zuschneiden eines Hintergrunds an Text steht außerdem eine herstellerspezifische Version (-webkit-background-clip) zur Verfügung.
| Anfangswert | border-box |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.backgroundClip = "content-box"; |
Syntax
Syntax der CSS background-clip-Eigenschaft
background-clip: border-box | padding-box | content-box | text | initial | inherit;Beispiel zur background-clip-Eigenschaft:
Beispiel zur CSS background-clip-Eigenschaft mit dem Wert content-box
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
border: 3px solid #666;
padding: 15px;
background: #ccc;
background-clip: content-box;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>Here the "content-box" value is used.</p>
<div id="example">
<p>The background extends to the edge of the content box.</p>
</div>
</body>
</html>Im folgenden Beispiel finden Sie den Unterschied zwischen den Werten „padding-box“ und „border-box“.
Beispiel zur background-clip-Eigenschaft mit den Werten „padding-box“ und „border-box“:
Beispiel zur CSS background-clip-Eigenschaft mit dem Wert border-box
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</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>Background-clip property example</h2>
<p>Here the background-clip is set to "border-box" (this is the default value).</p>
<div id="example1">
<p>The background extends behind the border.</p>
</div>
<p>Here the background-clip is set to "padding-box".</p>
<div id="example2">
<p>The background extends to the inside edge of the border.</p>
</div>
</body>
</html>In diesem Beispiel wird der Hintergrund innerhalb des Vordergrundtextes gezeichnet.
Beispiel zur background-clip-Eigenschaft mit dem Wert „text“:
Beispiel zur CSS background-clip-Eigenschaft mit dem Wert text
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
border: 3px dashed #1ebf42;
padding: 15px;
background: #1c87c9;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>Here the background-clip is set to "text"</p>
<div id="example">
<p>The background is painted within the foreground text.</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| border-box | Der Hintergrund wird hinter dem Rand angezeigt. Dies ist der Standardwert. | Testen » |
| padding-box | Der Hintergrund wird innerhalb des Rands angezeigt. | Testen » |
| content-box | Der Hintergrund erstreckt sich bis zum Rand des Inhaltsbereichs. | Testen » |
| text | Der Hintergrund wird innerhalb des Vordergrundtextes gezeichnet. | Testen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche der folgenden Werte können mit der 'background-clip'-Eigenschaft in CSS verwendet werden?