效果图:

代码:

<span class="titleName">这是个测试字体</span>

.titleName {
background: linear-gradient(#ffffff,50%,#7e7e7e);
-webkit-background-clip: text;
color: transparent;
}

-webkit-background-clip: text;
-webkit-background-clip: text;意思是,以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉。
首先:给外层div来一个渐变。
其次:用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪;
最后:把文字变透明:可以用rgba给文本填充透明颜色或者直接设置color: transparent;

css3字体颜色渐变的更多相关文章

  1. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  2. css3实现颜色渐变以及兼容性处理

    有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...

  3. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  4. ios显示艺术字字体颜色渐变

    UIColor * myColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"123.jpg"]]; self. ...

  5. wpf设置字体颜色渐变和字体阴影

    <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment=&quo ...

  6. css3背景颜色渐变

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  7. IE11中实现颜色渐变

    background: -ms-linear-gradient(left,#daa23e,#ad7f27); 下面是css3中颜色渐变对各个浏览器的写法:background: -webkit-lin ...

  8. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  9. WPF [调用线程无法访问此对象,因为另一个线程拥有该对象。] 解决方案以及如何实现字体颜色的渐变

    本文说明WPF [调用线程无法访问此对象,因为另一个线程拥有该对象.] 解决方案以及如何实现字体颜色的渐变 先来看看C#中Timer的简单说明,你想必猜到实现需要用到Timer的相关知识了吧. C# ...

  10. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

随机推荐

  1. 发布 Net8预览版1(Announcing .NET 8 Preview 1)

    发布 net8预览版1(Announcing .NET 8 Preview 1) 1.对Net持续看好,对未来更加充满信心. 2.我主要关注Asp.Net Core .NET 8 中的新增功能 Wha ...

  2. Android集成mupdf,实现手写笔签字,手指翻页的java代码

    import android.graphics.Bitmap; import android.graphics.Color; import android.graphics.RectF; import ...

  3. VSCode 修改终端显示字体 字体间隔过大

    参考链接: https://code84.com/172442.html

  4. 处理Android的物理后退按钮

    在文章.聊天.联系.相册四个页面时,用户点击Android 物理键返回,需要直接退出程序.我这里处理很简单,直接使用react-navigation的属性backbehavior就很快的解决了. &l ...

  5. 25 String 对象中的属性

    <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF ...

  6. class_man

    #!/usr/bin/python # -*- coding: UTF-8 -*- class Man():          def __init__(self, name="" ...

  7. MyBatis_06(自定义映射resultMap)

    主题:自定义映射resultMap "自定义映射resultMap",可以解决什么问题: 1-"属性" 和 "字段名" 不一致的情况 2-& ...

  8. javascript获取浏览器窗口分辨率|浏览器全屏分辨率|屏幕分辨率

    浏览器窗口分辨率指显示网页的区域,在PC端由于浏览器窗口大小可调节,这个值是可变的.在手机等移动端浏览器窗口大小不可调节,宽度值是固定的,但竖屏和横屏切换会改变. 浏览器全屏分辨率是指浏览器启用全屏显 ...

  9. 日記かな、自分のサーバ作りの?(01、try…catch…の問題)

    今日まだ終わらないうちに.昼間から出会ったbugについて.取りまとめましょう. 一応try-catch-にかかわる問題かな- try(do something){ }catch{ } と try(){ ...

  10. ROS-安装与开发速记

    参考教程: B站视频(感谢赵老师):https://www.bilibili.com/video/BV1Ci4y1L7ZZ?p=14&spm_id_from=pageDriver 课程文件:h ...