css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。

实现文件渐变的方法有两种

1. 使用 background 的属性

2. 使用 mask 属性

方式一、

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

    span {

        font-size: 30px;

        background: linear-gradient(to right, red, blue);

        -webkit-background-clip: text;

        color: transparent;

    }

    </style>

</head>

<body>

    <span>Hello world</span>

</body>

</html>

效果如下

代码也是非常简单：

background: liner-gradient(to right, red, blue); 这个就是设置背景色，这是是background-image的简写，不是backround-color

-webkit-background-clip: text; 这个属性在 W3School 上有明确解释

但是并没有text 属性，所以这个只能在chrome上看到效果，在其他浏览器没有实现，它的兼容性就有很大的问题了

方式二、

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<style type="text/css">

    h1{

        position: relative;

        color: yellow;

    }

    h1:before{

        content: attr(data-text);

        position: absolute;

        z-index: 10;

        color:pink;

        -webkit-mask:linear-gradient(to left, red, transparent );

    }

</style>

</style>

</head>

<body>

    <h1 data-text="hello world">hello world</h1>

</body>

效果如下

参考  简单说 CSS中的mask—好好利用mask-image

张鑫旭： 小tip:CSS3下的渐变文字效果实现

												


											
css实现文字渐变的更多相关文章
	

    
								
  1. Css3 文字渐变整理（一）
		
    一.文本颜色渐变 <gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像. 语法:<gradient> = li ...
    
		
    2. 
						
  2. css Backgroud-clip (文字颜色渐变)
		
    首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪...   按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...
    
		
    3. 
						
  3. css彩色（渐变）文字
		
    css彩色文字也称渐变文字 在张鑫旭博客首页看到这效果,就自己研究了一下. 实现方法加个背景然后在根据文本剪切,再把文本填充为透明色让之前设置的背景颜色显示出来即可. -webkit-backgrou ...
    
		
    4. 
						
  4. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
		
    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
    
		
    5. 
						
  5. css控制文字长度，超出长度显示...
		
    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...
    
		
    6. 
						
  6. (转载)最实用的清除浮动代码   css的文字过长裁剪后面跟着省略号
		
    css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...
    
		
    7. 
						
  7. 用CSS让文字居于div的底部
		
    css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...
    
		
    8. 
						
  8. --css 控制文字多使用省略号
		
    --css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...
    
		
    9. 
						
  9. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
		
    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. html自己写响应式布局（说起来很高大上的样子，但是其实很简单）
			
    第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...
    
			
    2. 
						
  2. Python3基础教程（十六）——  迭代器、生成器、装饰器
			
    在这个实验里我们学习迭代器.生成器.装饰器有关知识. 这几个概念是 Python 中不容易理解透彻的概念,务必把所有的实验代码都完整的输入并理解清楚其中每一行的意思. 迭代器 Python 迭代器(I ...
    
			
    3. 
						
  3. 数组、list排序
			
    //数字排序 int[] intArray = new int[] {4, 1, 3, -23}; Arrays.sort(intArray); 输出: [-23, 1, 3, 4] //字符串排序, ...
    
			
    4. 
						
  4. QT_5_ Qt中信号和槽  +  自定义信号和槽  +   lambda 表达式
			
    1.Qt中信号和槽 1.1 需求:点击按钮关闭窗口 1.2 利用connect进行链接 1.3 参数1 信号发送者(指针) 参数2 发送的信号(信号地址) 参数3 信号的接受者(指针) 参数4 处理槽 ...
    
			
    5. 
						
  5. 小程序08 小程序访问服务器API
			
    后台交互 小程序是前端框架,需要和后台交互,本次课程主要介绍网络API. 小程序提供的网络访问API wx.request接口 发起 HTTPS 网络请求. 使用rqeust接口前的工作 1.小程序需 ...
    
			
    6. 
						
  6. [BZOJ3211]:花神游历各国（小清新线段树）
			
    题目传送门 题目描述: 花神喜欢步行游历各国,顺便虐爆各地竞赛.花神有一条游览路线,它是线型的,也就是说,所有游历国家呈一条线的形状排列,花神对每个国家都有一个喜欢程度(当然花神并不一定喜欢所有国家) ...
    
			
    7. 
						
  7. 出现了错误。详细消息: 3 uncommitted changes would be overwritten by merge
			
    merge manual中有一条警告: 出现了错误.详细消息: 3 uncommitted changes would be overwritten by merge 有未提交修改情况下,不要执行me ...
    
			
    8. 
						
  8. Spring上传报错413
			
    SpringMVC上传文件报错413 笔者今天工作时,运维的同事反馈我们上线不久的项目上传文件过大时,总是提示上传失败. 场景重现一下,发现报错信息显示413:Request entity too l ...
    
			
    9. 
						
  9. How far away?
			
    C - How far away ? HDU - 2586 There are n houses in the village and some bidirectional roads connect ...
    
			
    10. 
						
  10. Java之浅拷贝与深拷贝
			
    ----?浅拷贝 --- 概念 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.简单说,浅拷贝就是只复制所考虑的对象,而不复制它所引用的对象 --- 实现方 ...
    
			
    11.