说明

这次的重点就在于两个属性， 
background 属性 
mask 属性
这两个属性分别是两种实现方式的关键。

方式一

解释

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

    span {

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

        -webkit-background-clip: text;

        color: transparent;

    }

    </style>

</head>

<body>

        <span>前端简单说</span>

</body>

</html>

代码不多，我们来看看， 
background: linear-gradient(to right, red, blue); 这行是给背景设置为渐变色，这里注意一点，这样是简写了，其实是给background-image 设置为渐变色，不是 background-color ，是背景图 取值为渐变色

-webkit-background-clip: text; 这行就要说到，background-clip 属性了 ，我们来看看 W3Cschool 上的说明

background-clip 属性 规定背景的绘制区域

语法

background-clip: border-box|padding-box|content-box;

　border-box： 背景被裁减到边框盒

　padding-box： 背景被裁减到内边距框

　content-box：  背景被裁减到内容框

上面没有说取值 text 的情况，看到前面的前缀，大家应该也能想到，它的兼容性问题了，目前还不是能所有浏览器都支持。

取值为text的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

所以，我们最后写color: transparent; 让文字为透明色，就是让后面背景色显示出来。

方式二

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<style type="text/css">

    h1{

        position: relative;

        color: yellow;

    }

    h1:before{

        content: attr(text);

        position: absolute;

        z-index: 10;

        color:pink;

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

    }

</style>

</style>

</head>

<body>

    <h1 text="前端简单说">前端简单说</h1>

</body>

</html>

代码也不多，我们简单说一下，

:before 选择器向选定的元素 前 插入内容。

使用content 属性来指定要插入的内容。

content取值 attr 就是用来获取属性值的，content:attr(属性名);

content: attr(text); 能获取到元素的 text 属性，这里的这个text属性是自己自定义的一个属性，你也可以在元素中加一个 tt 属性，像这样 
<h1 tt="前端简单说">前端简单说</h1> 
然后content属性 这样写，content: attr(tt); 同样是可以起作用的。

mask属性简单说，就是能让元素的某一部分显示或隐藏。

转载出处:  https://blog.csdn.net/FE_dev/article/details/78450844

通过CSS实现 文字渐变色 的两种方式的更多相关文章

  1. 简单说 通过CSS实现 文字渐变色 的两种方式

    说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...

  2. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  3. iOS开发小技巧--自定义带有占位文字的TextView(两种方式)

    自定义控件注意或框架注意:自己暴露在外面的属性,一定要重写setter,保证外界与内部的交互性 一.方案一:通过drawRect:方法将文字画到textView中,监听文字改变用的是通知中心(代理也可 ...

  4. 【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局

    传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...

  5. [CSS] 子元素垂直居中的两种方式

    1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...

  6. 获取select文本框的下拉菜单文字内容的两种方式

    <body> <div class="box"> <select id="sel"> <option value=&q ...

  7. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

  8. css清除浮动的两种方式（clearfix和clear）

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  9. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

随机推荐

  1. linux文件权限更改命令chmod及数字权限实践总结

     改变权限属性命令chmod chmod 是用来改变文件或目录权限的命令,但只有文件的属主和超级用户root才有这种权限.通过chmod来改变文件或目录的权限有两种方法:一种是通过权限字母和操作符表达 ...

  2. python-Re模块用法

    主要函数:match().search().compile() re.compile compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象,供 match() 和 se ...

  3. PYTHON 100days学习笔记004：循环结构

    目录 Day04 - 循环结构 1. 循环结构的应用场景 2.for-in循环 3. while循环 4. 练习 4.1 输入一个数判断是不是素数. 4.2 输入两个正整数,计算最大公约数和最小公倍数 ...

  4. SpringBoot项目在IDEA中以jar方式部署

    1.在pom.xml下添加如下插件 这个插件可以在项目打包成jar包后,通过java -jar运行 <build> <plugins> <plugin> <g ...

  5. poj2152 Fire（树形DP）

    题目链接:https://vjudge.net/problem/POJ-2152 题意:给定一颗大小为n的树,在每个结点建消防站花费为w[i],如果某结点没有消防站,只要在它距离<=d[i]的结 ...

  6. [转帖]容器云之K8s自动化安装方式的选择

    容器云之K8s自动化安装方式的选择 时间 2016-12-05 19:10:53  极客头条 原文  http://geek.csdn.net/news/detail/127426 主题 Kubern ...

  7. Codeforces 1237E. Balanced Binary Search Trees

    传送门 这一题是真的坑人,时间空间都在鼓励你用 $NTT$ 优化 $dp$...(但是我并不会 $NTT$) 看到题目然后考虑树形 $dp$ ,设 $f[i][0/1]$ 表示 $i$ 个节点的树,根 ...

  8. sql server存储过程回滚事务

    SET NOCOUNT ON这个很常用 作用:阻止在结果集中返回显示受T-SQL语句或则usp影响的行计数信息. 当SET ONCOUNT ON时候,不返回计数,当SET NOCOUNT OFF时候, ...

  9. A Pythonic Card Deck: __len__ & __getitem__ & for 循环的嵌套

    1. 列表生成式的嵌套 for 循环: 示例如下: li1 = range(1,6) li2 = list("ABC") # list("ABC") 的结果为 ...

  10. mysql的decimal(10,0) not null问题

    今天排查一个bug发现开发环境老是报错 order_num 字段insert的时候不能为空,但是发现测试环境没有这个问题. 后来发现测试环境有一个数据库docker安装的mysql 版本是5.7  而 ...