• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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-colorcolortext-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