CSS text-fill-color-Eigenschaft
Die -webkit-text-fill-color-Eigenschaft legt die Füllfarbe der Zeichen im Text fest.
Wird diese Eigenschaft nicht angegeben, wird der Wert der color-Eigenschaft verwendet.
In Kombination mit background-clip: text überschreibt -webkit-text-fill-color die color-Eigenschaft für die Textfüllung.
INFO
Die Eigenschaft -webkit-text-fill-color wird hauptsächlich zusammen mit -webkit-background-clip: text verwendet, um Gradient-Texteffekte zu erstellen. Hinweis: Safari unterstützt background-clip: text, unterstützt jedoch nicht die standardisierte Eigenschaft text-fill-color. Verwenden Sie -webkit-text-fill-color für die browserübergreifende Kompatibilität.
DANGER
Die Eigenschaft text-fill-color ist nicht in allen Browsern vollständig standardisiert. Verlassen Sie sich nicht darauf, ohne Fallbacks für Produktions-Websites einzusetzen, da sie nicht bei allen Nutzern funktioniert. Die Implementierungsdetails können variieren, und das Verhalten könnte sich in Zukunft ändern.
| Anfangswert | currentColor |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Ja. Die Farbe ist animierbar. |
| Version | Kompatibilitätsstandard |
| DOM-Syntax | object.style.textFillColor = "#1c87c9"; |
Syntax
CSS -webkit-text-fill-color Werte
-webkit-text-fill-color: color | initial | inherit;Beispiel für die text-fill-color-Eigenschaft:
text-fill-color weiteres Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 0;
font-size: 1.5em;
-webkit-text-fill-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-fill-color property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ergebnis
Beispiel für die text-fill-color-Eigenschaft mit dem Wert „transparent“:
Beispiel für die CSS text-fill-color-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article {
padding: 10px;
margin: 15px auto;
font-size: 18px;
}
p {
color: #444;
line-height: 1.6;
margin: 20px 0;
background: #E7E7E2;
}
q {
display: block;
margin: 25px 0;
text-transform: uppercase;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: #8e2b88;
-webkit-text-fill-color: transparent;
background: linear-gradient(to bottom, #ff0052, #8e2b88);
-webkit-background-clip: text;
background-clip: text;
}
q:before {
content: '';
}
</style>
</head>
<body>
<article>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
<q>
The text-fill-color property is used with -webkit- extension.
</q>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
</p>
</article>
</body>
</html>Beispiel zur Verwendung der text-fill-color-Eigenschaft zum Festlegen eines horizontalen Gradienten:
Beispiel für die text-fill-color-Eigenschaft mit transparentem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
display: inline-block;
font-family: sans-serif;
font-weight: bold;
font-size: 40pt;
background: linear-gradient(to right, rgb(25, 76, 192), rgb(196, 26, 3) 20%, rgb(236, 190, 6) 40%, rgb(25, 76, 192) 60%, rgb(3, 116, 8) 80%, rgb(196, 26, 3));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>Cascading Style Sheets (CSS)</h1>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| color | Legt die Vordergrund-Füllfarbe des Textinhalts des Elements fest. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was können Sie über die CSS-Eigenschaft 'text-fill-color' gemäß den auf der Seite bereitgestellten Informationen sagen?