text-fill-color - 文字填充颜色 - css 颜色
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-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; }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表现,例如文字遮罩。
此文字遮罩动画效果的实现单单使用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
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!