W3docs
ru
Войти

Свойство CSS text-fill-color

Используйте свойство CSS text-fill-color для задания цвета заливки текста. Изучите значения свойства и примеры.

Свойство -webkit-text-fill-color задаёт цвет заливки символов текста — цвет, которым закрашивается внутренняя часть каждого глифа.

На этой странице объясняется, что делает свойство, чем оно отличается от обычного свойства color, почему оно почти всегда используется вместе с background-clip: text для создания градиентного текста, а также какие особенности поддержки браузерами следует учитывать.

Связь со свойством color

Само по себе -webkit-text-fill-color выполняет ту же функцию, что и color: задаёт заливку текста. Если -webkit-text-fill-color не задано, вместо него используется значение свойства color.

Разница проявляется, когда оба свойства присутствуют одновременно или когда применяется background-clip: text. -webkit-text-fill-color всегда имеет приоритет над color для заливки — именно поэтому оно используется для переопределения color, когда фон обрезается по форме текста:

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

Создание градиентного текста

Наиболее распространённая причина использования этого свойства — градиентный текст. Рецепт таков:

  1. Поместите градиент (или любое изображение) в background элемента.
  2. Обрежьте этот фон по форме текста с помощью -webkit-background-clip: text и background-clip: text.
  3. Установите -webkit-text-fill-color: transparent, чтобы сплошная заливка стала прозрачной и сквозь глифы был виден обрезанный фон.

Без третьего шага непрозрачная заливка перекроет фон, и градиент останется невидимым. Синтаксис градиентов описан в разделе CSS gradients, а принцип обрезки по тексту — в разделе background-clip.

Информация

Свойство -webkit-text-fill-color используется преимущественно вместе с -webkit-background-clip: text для создания градиентных текстовых эффектов. Обратите внимание: Safari поддерживает background-clip: text, но не поддерживает стандартное свойство text-fill-color. Используйте -webkit-text-fill-color для обеспечения кроссбраузерной совместимости.

Опасно

Свойство text-fill-color не является полностью стандартизированным во всех браузерах. Не используйте его на продакшн-сайтах без запасных вариантов, поскольку оно работает не у всех пользователей. Детали реализации могут различаться, а поведение может измениться в будущем.

Initial ValuecurrentColor
Applies toAll elements.
InheritedYes.
AnimatableYes. The color is animatable.
VersionCompatibility Standard
DOM Syntaxobject.style.textFillColor = "#1c87c9";

Синтаксис

Значения CSS -webkit-text-fill-color

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

Примеры

Сплошная заливка текста

<!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>
Попробуйте сами »

Результат

text-fill-color с прозрачным значением

Вертикальный градиент со значением transparent

Здесь заливка задаётся как transparent, а вертикальный linear-gradient обрезается по форме текста заголовка:

<!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>
Попробуйте сами »

Горизонтальный градиент с несколькими точками остановки

<!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>
Попробуйте сами »

Значения

ValueDescription
colorЗадаёт цвет заливки переднего плана текстового содержимого элемента. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla().
initialУстанавливает значение свойства по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Поддержка браузерами и запасные варианты

-webkit-text-fill-color является частью стандарта совместимости WHATWG, а не основной спецификации CSS, поэтому во всех браузерах, включая не основанные на WebKit, например Firefox, требуется префикс -webkit-. Поскольку свойство не является полностью стандартизированным, всегда указывайте запасной вариант:

  • Задайте обычное свойство color с подходящим сплошным цветом. Браузеры, игнорирующие -webkit-text-fill-color, будут использовать color, и текст останется читаемым.
  • Не используйте -webkit-text-fill-color: transparent без обрезанного фона — если background-clip: text не поддерживается, текст станет невидимым. Используйте transparent вместе с запасным значением color или определяйте поддержку через @supports (background-clip: text) or (-webkit-background-clip: text).

Связанные свойства

  • color — стандартный способ задать цвет текста и запасной вариант для данного свойства.
  • background-clip — обрезает фон по форме текста, позволяя градиенту просвечивать сквозь него.
  • CSS gradients — градиенты, используемые в приведённых выше примерах.
  • text-stroke — добавляет контур вокруг глифов, часто применяется вместе с цветом заливки.
  • CSS color names — именованные цвета, которые можно передавать в качестве значения.

Практика

Практика
Что вы можете сказать о CSS-свойстве 'text-fill-color' согласно информации на этой странице?
Что вы можете сказать о CSS-свойстве 'text-fill-color' согласно информации на этой странице?
Was this page helpful?