W3docs
fr
Se connecter

Propriété CSS text-fill-color

Utilisez la propriété CSS text-fill-color pour définir la couleur de remplissage du texte. Découvrez les valeurs et pratiquez avec des exemples.

La propriété -webkit-text-fill-color spécifie la couleur de remplissage des caractères du texte — la couleur peinte à l'intérieur de chaque glyphe.

Cette page explique ce que fait la propriété, en quoi elle diffère de la propriété color standard, pourquoi elle est presque toujours associée à background-clip: text pour créer du texte en dégradé, et quelles précautions prendre concernant la compatibilité navigateur.

Relation avec la propriété color

Seule, -webkit-text-fill-color remplit le même rôle que color : elle définit le remplissage du texte. Si vous ne définissez pas -webkit-text-fill-color, c'est la valeur de la propriété color qui est utilisée à la place.

La différence apparaît lorsque les deux sont présentes, ou lorsque background-clip: text est utilisé. -webkit-text-fill-color prend toujours la priorité sur color pour le remplissage, ce qui explique précisément pourquoi elle est utilisée pour remplacer color quand un arrière-plan est découpé sur le texte :

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

Créer du texte en dégradé

La raison la plus courante d'utiliser cette propriété est la création de texte en dégradé. La recette est la suivante :

  1. Appliquez un dégradé (ou toute image) sur l'background de l'élément.
  2. Découpez cet arrière-plan sur la forme du texte avec -webkit-background-clip: text et background-clip: text.
  3. Définissez -webkit-text-fill-color: transparent pour que le remplissage opaque devienne transparent et que l'arrière-plan découpé apparaisse à travers les glyphes.

Sans l'étape 3, le remplissage opaque recouvrirait l'arrière-plan et le dégradé ne serait jamais visible. Consultez CSS gradients pour la syntaxe des dégradés et background-clip pour comprendre le découpage sur le texte.

Info

La propriété -webkit-text-fill-color est principalement utilisée avec -webkit-background-clip: text pour créer des effets de texte en dégradé. À noter : Safari prend en charge background-clip: text mais ne prend pas en charge la propriété standard text-fill-color. Utilisez -webkit-text-fill-color pour une compatibilité cross-navigateur.

Danger

La propriété text-fill-color n'est pas entièrement standardisée dans tous les navigateurs. Ne comptez pas sur elle pour des sites en production sans prévoir des solutions de repli, car elle ne fonctionnera pas pour tous les utilisateurs. Les détails d'implémentation peuvent varier et le comportement pourrait changer à l'avenir.

Valeur initialecurrentColor
S'applique àTous les éléments.
HéritéeOui.
AnimableOui. La couleur est animable.
VersionCompatibility Standard
Syntaxe DOMobject.style.textFillColor = "#1c87c9";

Syntaxe

Valeurs CSS de -webkit-text-fill-color

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

Exemples

Un remplissage de texte uni

<!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>
Essayez vous-même »

Résultat

text-fill-color avec la valeur transparent

Un dégradé vertical avec la valeur "transparent"

Ceci définit le remplissage sur transparent et découpe un linear-gradient vertical sur le texte du titre :

<!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>
Essayez vous-même »

Un dégradé horizontal à plusieurs points d'arrêt

<!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>
Essayez vous-même »

Valeurs

ValeurDescription
colorSpécifie la couleur de remplissage du contenu texte de l'élément. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initialForce la propriété à utiliser sa valeur par défaut.
inheritHérite la propriété de son élément parent.

Compatibilité navigateur et solutions de repli

-webkit-text-fill-color fait partie du WHATWG Compatibility Standard plutôt que d'une spécification CSS principale, elle dépend donc du préfixe -webkit- dans tous les navigateurs, y compris ceux qui ne sont pas basés sur WebKit comme Firefox. Comme ce n'est pas une propriété entièrement standardisée, prévoyez toujours une solution de repli :

  • Définissez la propriété color standard sur une couleur unie utilisable. Les navigateurs qui ignorent -webkit-text-fill-color se rabattent sur color, ce qui garantit la lisibilité du texte.
  • Évitez -webkit-text-fill-color: transparent sans arrière-plan découpé — si background-clip: text n'est pas pris en charge, le texte devient invisible. Associez transparent à une solution de repli color, ou détectez la fonctionnalité avec @supports (background-clip: text) or (-webkit-background-clip: text).

Propriétés associées

  • color — la méthode standard pour définir la couleur du texte et la solution de repli pour cette propriété.
  • background-clip — découpe l'arrière-plan sur le texte pour qu'un dégradé puisse apparaître en transparence.
  • CSS gradients — les dégradés utilisés dans les exemples ci-dessus.
  • text-stroke — ajoute un contour autour des glyphes, souvent combiné avec une couleur de remplissage.
  • CSS color names — les couleurs nommées que vous pouvez passer en valeur.

Pratique

Pratique
Que pouvez-vous dire à propos de la propriété CSS 'text-fill-color' d'après les informations fournies sur cette page ?
Que pouvez-vous dire à propos de la propriété CSS 'text-fill-color' d'après les informations fournies sur cette page ?
Was this page helpful?