text-fill-color

text-fill-color是CSS3中的属性，表示文字颜色填充，实现的效果基本上与color一样，目前仅webkit核心的浏览器下支持此属性，与之类似的还有一个属性就是text-stroke表示文本描边，本文主要展示text-fill-color的应用，text-stroke暂时扔在一边。从某种程度上讲text-fill-color与color基本上的作用是一样的，如果同时设置color与text-fill-color属性，显然是颜色填充覆盖本身的颜色，也就是文字显示text-fill-color设置的颜色（当然在浏览器支持text-fill-color属性的情况下）。虽然说，text-fill-color≈color，但是毕竟还是有差别的，就表现效果上来讲，text-fill-color还支持一个transparent属性，也就是透明填充。而这一属性可以实现一些精湛的UI表现，例如文字遮罩。

示例 

/*  values */
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100, 200, 0);

/* Global values */
-webkit-text-fill-color: inherit;
-webkit-text-fill-color: initial;
-webkit-text-fill-color: unset;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
IE不支持 text-fill-color ，其余浏览器都支持 text-fill-color

语法：

text-fill-color ： <color>

取值：<color>
指定文字的填充颜色。

说明：

检索或设置对象中的文字填充颜色。

  • 若同时设置 text-fill-color 和 color ， text-fill-color 定义的颜色将覆盖 color 属性；
  • 通过text-fill-color属性，可以做出一些例如渐变文字和镂空文字的效果。
  • 对应的脚本特性为 textFillColor 。
默认值 transparent
适用于 所有元素
继承性 有
动画性 是
计算值 指定值

示例： 

.text-fill-color{
width:950px;
margin:0 auto;
background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font:bold 95px/1.231 georgia,sans-serif;
text-transform:uppercase;
}
</style>
</head>
<body>
<div class="text-fill-color">text-fill-color</div>
</body>


text-fill-color 是CSS3中的属性，表示文字颜色填充，实现的效果基本上与color一样，目前仅webkit核心的浏览器下支持此属性，与之类似的还有一个属性就是 text-stroke 表示文本描边，本文主要展示text-fill-color的应用，text-stroke暂时扔在一边。从某种程度上讲text-fill-color与color基本上的作用是一样的，如果同时设置color与text-fill-color属性，显然是颜色填充覆盖本身的颜色，也就是文字显示text-fill-color设置的颜色（当然在浏览器支持text-fill-color属性的情况下）。虽然说，text-fill-color≈color，但是毕竟还是有差别的，就表现效果上来讲，text-fill-color还支持一个transparent属性，也就是透明填充。而这一属性可以实现一些精湛的UI表现，例如文字遮罩。

此文字遮罩动画效果的实现单单使用text-fill-color属性是实现不了了，此效果的实现还配合了另外一个CSS3属性就是 animate ，CSS3动画属性，这也是目前仅webkit核心浏览器支持的属性，animate动画类型与名称很多，这里应用的动画名是masked-animation，也就是“动画-遮罩”的意思，配合animate固定的一些参数（例如时间，缓动模式）等，就可以实现本文所示的效果了。


文字遮罩例子

CSS代码： 

.masked{
     background:url(../image/paint.png);
    -webkit-text-fill-color:transparent;
    -webkit-background-clip:text;
    -webkit-animation-name:masked-animation;
    -webkit-animation-duration:40s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    color:#fff;
}
@-webkit-keyframes masked-animation {
    0% {background-position:left bottom;}
    100% {background-position:right bottom;}
}

HTML代码： 

<div class="masked">
    <h4>这是一段可选文字</h4>
</div>

 
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8"/>
<style>
html,body{
margin:50px0;
}
.text-fill-color{
width:950px;
margin:0auto;
background:-webkit-linear-gradient(top,#eee,#aaa50%,#33351%,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font:bold95px/1.231georgia,sans-serif;
text-transform:uppercase;
}
</style>
</head>
<body>
<div class="text-fill-color">text-fill-color</div>
</body>
</html>

效果图：

上篇： currentColor