W3docs
de
Anmelden

CSS text-fill-color Eigenschaft

Mit der CSS-Eigenschaft text-fill-color lässt sich die Füllfarbe von Text festlegen. Werte, Syntax und Beispiele.

Die Eigenschaft -webkit-text-fill-color legt die Füllfarbe der Zeichen im Text fest – die Farbe, die innerhalb jeder Glyphe gezeichnet wird.

Diese Seite erklärt, was die Eigenschaft bewirkt, wie sie sich von der regulären Eigenschaft color unterscheidet, warum sie fast immer zusammen mit background-clip: text verwendet wird, um Verlaufstext zu erstellen, und welche Hinweise zur Browserunterstützung zu beachten sind.

Verhältnis zur color-Eigenschaft

Allein betrachtet erfüllt -webkit-text-fill-color dieselbe Aufgabe wie color: Sie setzt die Textfüllung. Wenn -webkit-text-fill-color nicht gesetzt ist, wird stattdessen der Wert der Eigenschaft color verwendet.

Der Unterschied zeigt sich, wenn beide Eigenschaften gesetzt sind oder wenn background-clip: text im Spiel ist. -webkit-text-fill-color hat gegenüber color immer Vorrang für die Füllung – genau deshalb wird es verwendet, um color zu überschreiben, wenn ein Hintergrund auf den Text zugeschnitten wird:

p {
  color: #444;                       /* fallback if text-fill-color is unsupported */
  -webkit-text-fill-color: #1c87c9;  /* takes priority for the fill */
}

Verlaufstext erstellen

Der häufigste Grund, diese Eigenschaft zu verwenden, ist Verlaufstext. Das Rezept lautet:

  1. Einen Verlauf (oder ein beliebiges Bild) als background des Elements setzen.
  2. Diesen Hintergrund mit -webkit-background-clip: text und background-clip: text auf die Form des Textes zuschneiden.
  3. -webkit-text-fill-color: transparent setzen, damit die einfarbige Füllung transparent wird und der zugeschnittene Hintergrund durch die Glyphen hindurchscheint.

Ohne Schritt 3 würde die opake Füllung den Hintergrund überdecken, und der Verlauf wäre nicht zu sehen. Siehe CSS-Verläufe für die Verlaufssyntax und background-clip dafür, wie das Zuschneiden auf Text funktioniert.

Info

Die Eigenschaft -webkit-text-fill-color wird hauptsächlich zusammen mit -webkit-background-clip: text eingesetzt, um Verlaufstexteffekte zu erzeugen. Hinweis: Safari unterstützt background-clip: text, unterstützt jedoch nicht die standardmäßige Eigenschaft text-fill-color. Verwende -webkit-text-fill-color für browserübergreifende Kompatibilität.

Gefahr

Die Eigenschaft text-fill-color ist nicht vollständig in allen Browsern standardisiert. Verwende sie auf Produktionsseiten nicht ohne Fallbacks, da sie nicht für alle Nutzer funktioniert. Implementierungsdetails können variieren, und das Verhalten könnte sich in Zukunft ändern.

AusgangswertcurrentColor
Gilt fürAlle Elemente.
VererbbarJa.
AnimierbarJa. Die Farbe ist animierbar.
VersionCompatibility Standard
DOM-Syntaxobject.style.textFillColor = "#1c87c9";

Syntax

CSS -webkit-text-fill-color Werte

-webkit-text-fill-color: color | initial | inherit;

Beispiele

Eine einfarbige Textfüllung

<!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>
Probier es selbst »

Ergebnis

text-fill-color mit dem Wert transparent

Ein vertikaler Verlauf mit dem Wert "transparent"

Hier wird die Füllung auf transparent gesetzt und ein vertikaler linear-gradient auf den Überschriftentext zugeschnitten:

<!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>
Probier es selbst »

Ein horizontaler Mehrstufen-Verlauf

<!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>
Probier es selbst »

Werte

WertBeschreibung
colorLegt die Vordergrund-Füllfarbe des Textinhalts des Elements fest. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden.
initialSetzt die Eigenschaft auf ihren Standardwert zurück.
inheritErbt die Eigenschaft vom übergeordneten Element.

Browserunterstützung und Fallbacks

-webkit-text-fill-color ist Teil des WHATWG Compatibility Standard und nicht Teil der CSS-Kernspezifikation. Daher benötigt sie in jedem Browser das Präfix -webkit-, auch in Nicht-WebKit-Browsern wie Firefox. Da es sich nicht um eine vollständig standardisierte Eigenschaft handelt, sollte immer ein Fallback angegeben werden:

  • Die reguläre Eigenschaft color auf eine verwendbare Volltonfarbe setzen. Browser, die -webkit-text-fill-color ignorieren, greifen auf color zurück, sodass der Text lesbar bleibt.
  • -webkit-text-fill-color: transparent ohne zugeschnittenen Hintergrund vermeiden – wenn background-clip: text nicht unterstützt wird, wird der Text unsichtbar. transparent immer mit einem color-Fallback kombinieren oder per Feature-Erkennung mit @supports (background-clip: text) or (-webkit-background-clip: text) absichern.

Verwandte Eigenschaften

  • color — der Standardweg zum Festlegen der Textfarbe und der Fallback für diese Eigenschaft.
  • background-clip — schneidet den Hintergrund auf den Text zu, sodass ein Verlauf hindurchscheinen kann.
  • CSS-Verläufe — die in den obigen Beispielen verwendeten Verläufe.
  • text-stroke — fügt einen Umriss um Glyphen hinzu, oft in Kombination mit einer Füllfarbe.
  • CSS-Farbnamen — die benannten Farben, die als Wert übergeben werden können.

Übung

Übung
Was lässt sich über die CSS-Eigenschaft 'text-fill-color' anhand der auf dieser Seite bereitgestellten Informationen sagen?
Was lässt sich über die CSS-Eigenschaft 'text-fill-color' anhand der auf dieser Seite bereitgestellten Informationen sagen?
Was this page helpful?