text-fill-color

CSS text-fill-color Property

The text-fill-color property specifies the fill color of characters of the text.

If this property is not specified, the value of the color property is used.

The text-fill-color and the color properties are the same, but the text-fill-color takes precedence over the color if the two have different values.

The text-fill-color property is used with -webkit- extension.

The text-fill-color property has not been standardized yet. Do not use it on making sites meeting the Web: it will not work for all users. There may also be significant variances between implementations, and the performance may change in the future.

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

Syntax

Syntax

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

Example of the text-fill-color property:

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

Result

Example of the text-fill-color property with the “transparent” value:

<!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: #ff0052;
        color: #8e2b88;
        -webkit-text-fill-color: transparent;
        background: -webkit-gradient(linear, left top, left bottom, from(#ff0052), to(#8e2b88));
        background: -o-gradient(linear, left top, left bottom, from(#ff0052), to(#8e2b88));
        -webkit-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>

Example of using the text-fill-color property to set a horizontal gradient:

<!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: -webkit-gradient(linear, left top, right top, 
        from(rgb(25, 76, 192)), color-stop(20%, rgb(196, 26, 3)), 
        color-stop(40%, rgb(236, 190, 6)), 
        color-stop(60%, rgb(25, 76, 192)), 
        color-stop(80%, rgb(3, 116, 8)), 
        to(rgb(196, 26, 3)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>Cascading Style Sheets (CSS)</h1>
  </body>
</html>

Values

Values

ValueDescription
colorSpecifies foreground fill color of the element’s text content. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
initialMakes the property use its default value.
inheritInherits the property from its parent element.


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部