百科狗-知识改变命运!
--

text-fill-color - 文字填充颜色 - css 颜色

百变鹏仔1年前 (2023-11-21)阅读数 21#技术干货
文章标签属性

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不支持text-fill-color,其余浏览器都支持text-fill-color

语法:

text-fill-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;
} 
text-fill-color

text-fill-color - 文字填充颜色 - css 颜色


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代码:

这是一段可选文字

 
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;
} 
text-fill-color

效果图:

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)