W3docs
ru
Войти

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

Use the text-fill-color CSS property to specify the color of the fill of the text. See property values and practice with examples.

Свойство -webkit-text-fill-color задаёт цвет заливки символов в тексте.

Если это свойство не указано, используется значение свойства color.

При использовании вместе с background-clip: text свойство -webkit-text-fill-color переопределяет свойство color для заливки текста.

info

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

danger

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

Начальное значениеcurrentColor
Применяется кКо всем элементам.
НаследуетсяДа.
АнимацияДа. Цвет можно анимировать.
ВерсияСтандарт совместимости
Синтаксис DOMobject.style.textFillColor = "#1c87c9";

Синтаксис

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

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

Пример свойства text-fill-color:

Другой пример кода text-fill-color

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

Пример свойства text-fill-color со значением «transparent»:

Пример свойства CSS text-fill-color

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

Пример использования свойства text-fill-color для установки горизонтального градиента:

Пример свойства text-fill-color со значением transparent

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

Значения

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

Практика

Практика

Что можно сказать о свойстве CSS 'text-fill-color' согласно информации на странице?