Proprietà CSS text-fill-color - -webkit-text-fill-color

La proprietà -webkit-text-fill-color specifica il colore di riempimento dei caratteri nel testo — il colore dipinto all'interno di ciascun glifo.

Questa pagina spiega cosa fa la proprietà, come si differenzia dalla normale proprietà color, perché viene quasi sempre abbinata a background-clip: text per creare testo con gradiente, e quali avvertenze sulla compatibilità tra browser considerare.

Relazione con la proprietà color

Da sola, -webkit-text-fill-color svolge lo stesso compito di color: imposta il riempimento del testo. Se non si imposta -webkit-text-fill-color, viene utilizzato il valore della proprietà color.

La differenza emerge quando entrambe sono presenti, o quando background-clip: text è in uso. -webkit-text-fill-color ha sempre la precedenza su color per il riempimento, ed è esattamente per questo che viene usata per sovrascrivere color quando uno sfondo viene ritagliato al testo:

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

Creare testo con gradiente

Il motivo più comune per utilizzare questa proprietà è il testo con gradiente. La ricetta è:

Applica un gradiente (o qualsiasi immagine) al background dell'elemento.
Ritaglia quel background alla forma del testo con -webkit-background-clip: text e background-clip: text.
Imposta -webkit-text-fill-color: transparent in modo che il riempimento solido diventi trasparente e lo sfondo ritagliato mostri attraverso i glifi.

Senza il passaggio 3, il riempimento opaco coprirebbe lo sfondo e il gradiente non sarebbe mai visibile. Consulta CSS gradients per la sintassi del gradiente e background-clip per capire come funziona il ritaglio al testo.

Informazione

La proprietà -webkit-text-fill-color viene utilizzata principalmente insieme a -webkit-background-clip: text per creare effetti di testo con gradiente. Nota: Safari supporta background-clip: text ma non supporta la proprietà standard text-fill-color. Usa -webkit-text-fill-color per la compatibilità tra browser.

Pericolo

La proprietà text-fill-color non è completamente standardizzata in tutti i browser. Non fare affidamento su di essa per i siti in produzione senza alternative di riserva, poiché non funzionerà per tutti gli utenti. I dettagli di implementazione possono variare e il comportamento potrebbe cambiare in futuro.

Valore iniziale	currentColor
Si applica a	Tutti gli elementi.
Ereditata	Sì.
Animabile	Sì. Il colore è animabile.
Versione	Compatibility Standard
Sintassi DOM	object.style.textFillColor = "#1c87c9";

Sintassi

Valori CSS -webkit-text-fill-color

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

Esempi

Riempimento testo solido

<!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>

Provalo tu stesso »

Risultato

Un gradiente verticale con il valore "transparent"

Questo imposta il riempimento su transparent e ritaglia un linear-gradient verticale al testo dell'intestazione:

<!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>

Provalo tu stesso »

Un gradiente orizzontale a più colori

<!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>

Provalo tu stesso »

Valori

Valore	Descrizione
color	Specifica il colore di riempimento in primo piano del contenuto testuale dell'elemento. Si possono usare nomi di colore, codici esadecimali, rgb(), rgba(), hsl(), hsla().
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Supporto browser e alternative di riserva

-webkit-text-fill-color fa parte del WHATWG Compatibility Standard piuttosto che di una specifica CSS principale, quindi richiede il prefisso -webkit- in ogni browser, inclusi quelli non WebKit come Firefox. Poiché non è una proprietà completamente standardizzata, fornisci sempre un'alternativa di riserva:

Imposta la normale proprietà color su un colore solido utilizzabile. I browser che ignorano -webkit-text-fill-color ricadono su color, mantenendo il testo leggibile.
Evita -webkit-text-fill-color: transparent senza uno sfondo ritagliato — se background-clip: text non è supportato, il testo diventa invisibile. Abbina transparent a una fallback con color, oppure rileva la funzionalità con @supports (background-clip: text) or (-webkit-background-clip: text).

Proprietà correlate

color — il modo standard per impostare il colore del testo e la fallback per questa proprietà.
background-clip — ritaglia lo sfondo al testo in modo che un gradiente possa trasparire.
CSS gradients — i gradienti usati negli esempi precedenti.
text-stroke — aggiunge un contorno attorno ai glifi, spesso combinato con un colore di riempimento.
CSS color names — i colori con nome che puoi passare come valore.

Esercitazione

Pratica

Cosa puoi dire della proprietà CSS 'text-fill-color' in base alle informazioni fornite nella pagina?

'text-fill-color' è una proprietà CSS che applica un colore solido a un testo.'text-fill-color' non funziona sulle piattaforme webkit, non è compatibile con i browser webkit.La proprietà 'text-fill-color' è adatta all'uso in pagine HTML e JavaScript.Questa proprietà CSS può essere usata anche con la proprietà -Webkit-Background-Clip e funziona solo quando il testo è trasparente.La proprietà 'text-fill-color' applica uno sfondo con gradiente a un testo.