说明

这次的重点就在于两个属性， 
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. PowerShell .Net整套环境搭建及部署系列

    此系列包含一套完整的集群部署,全是个人原创(除第一个是摘抄的),转载请注明出处 其中DFS部分在国内资料极少,且全是重复的,还是外面好些,有问题可以给出解决方案 若内容有不详之处或你也同样被DFS所困 ...

  2. Netty的那些”锁”事

    Netty锁事的五个关键点: ① 在意锁的对象和范围  --> 减少粒度 ②  注意锁的对象本身大小   --> 减少空间占用 ③ 注意锁的速度 --> 提高速度 ④不同场景选择不同 ...

  3. python-day7(正式学习)

    目录 数字类型内置方法 整形内置方法(int) 常用操作+内置方法 是否可变 浮点型内置方法(float) 常用操作+内置方法 是否可变 字符串内置方法 常用操作+内置方法 是否可变 数字类型内置方法 ...

  4. HTTP、HTTPS、WebSocket

    一 .HTTP 1.1 HTTP发展史 1.1.1 什么是HTTP 超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所 ...

  5. 怎样终止(杀掉) Linux 中的进程?

    使用 kill -9 进程号 命令, 可是强行终止该进程. 如果使用直接使用 kill 进程号 命令, 则会让进程 "自行了断" . 因此, 一般是 kill -9 进程号 用得较 ...

  6. linux常用的bash指令

    文本处理 awk sed grep sort uniq cat cut echo fmt tr nl egrep fgrep wc 进程监视 ps top htop atop lsof 网络 nmap ...

  7. Java object-oriented8/5

    package Chapter1.Class;/** * 制作一个简单的通讯录.. * @author LENOVO * */public class ClassDemo_01 { String na ...

  8. 大数据测试类型&大数据测试步骤

    一.什么是大数据? 大数据是一个大的数据集合,通过传统的计算技术无法进行处理.这些数据集的测试需要使用各种工具.技术和框架进行处理.大数据涉及数据创建.存储.检索.分析,而且它在数量.多样性.速度方法 ...

  9. Unity鼠标移动到物体上显示信息

    相信大家玩游戏的时候,鼠标移动到游戏装备上,都会显示装备的的具体信息,那么接下来就写代码把,废话不多说. 下面是 效果图 鼠标移动到装备位置显示的信息,鼠标移动不在装备区域后不现实信息,下面是代码 : ...

  10. 【weixin】微信支付---Native支付模式二（PC端支付大多采用此模式）

    [模式二]:商户后台系统调用微信支付[统一下单API]生成预付交易,将接口返回的链接生成二维码,用户扫码后输入密码完成支付交易.注意:该模式的预付单有效期为2小时,过期后无法支付 模式二与模式一相比, ...