实现文字颜色渐变
2018-06-24 01:59:30来源:未知 阅读 ()
前言
主要用到三个CSS属性:
- linear-gradient() 用来实现渐变的图像
- background-clip 指定对象的背景图像向外裁剪的区域
- text-fill-color 指定文字的填充颜色
实例
background: linear-gradient(to bottom,#fff 0%,#333 100%);
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
linear-gradient()可以指定渐变角度和颜色,例子中是从上至下的颜色变换
background-clip:text 已文字的形状作为裁剪区域
text-fill-color:transparent 文字的填充色是透明的
效果如下:
兼容性
chrome和较新版本的firefox都支持background-clip和text-fill-color属性,需加 -webkit- 前缀
IE都不支持 background-clip属性的text值
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:伤不起的微信小程序
下一篇:Sublime的用法
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- Vue 结合html2canvas和jsPDF实现html页面转pdf 2020-04-25
- Bootstrap4网格系统+文字排版+颜色 简单练习 2020-04-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash