说明

这次的重点就在于两个属性， 
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 脚本

    1.理解Linux Shell和基本Shell脚本语言的小贴士(一) http://blog.jobbole.com/63952/ ------伯乐在线

  2. 一篇文章带你了解SQL注入

    什么是SQL注入? 原理: Web应用程序对用户输入的数据校验处理不严或者根本没有校验,致使用户可以拼接执行SQL命令 危害: 注入可能导致数据丢失泄露或数据破坏.缺乏可审计性,有时甚至能导致完全接管 ...

  3. Sentence Screen Fitting

    Given a rows x cols screen and a sentence represented by a list of words, find how many times the gi ...

  4. ######<待随时补充>我的学习规划######

    一.关于Python 1.demo   一些基础实验,包含Python基础知识等,约300-500个 2.Python常见模块的了解学习,如 time datetime random 随机数 os 与 ...

  5. C#与C++的区别

    C# 参考链接:https://www.runoob.com/csharp/csharp-tutorial.html ------------------C#数据类型----------------- ...

  6. [AHOI2017初中组]guide 题解

    题面 我们无论怎么走,都是要从此点沿最短路径走到终点,所以我们以n为原点跑两边dijkstra就可以了: 而抱怨数可以根据之前跑出来的东西新建一个图,然后跑最短路就好了: #include <b ...

  7. llinux 进阶篇

    df 查看磁盘空间 df -h (加了之后就有单位了) free 指令,查看内存使用情况 free -m(表示一mb单位进行查看) head 查看一个文件的前n行,如果没有n 就默认为前10行 hea ...

  8. Docker——网络和存储（数据卷）

    iptables -t nat -vnL |grep docker 查看docker桥接网卡:brctl show 本地端口随机映射到docker容器的80端口上: docker run -d -P ...

  9. django 支持跨域请求配置

    参考:https://www.jianshu.com/p/63fb55bee142 核心注意点:

  10. C#实现鼠标滚筒缩放界面的效果

    elementCanvas继承UserControl 声明属性: #region 缩放属性添加 float ratio = 1.0f; public float Ratio { set { ratio ...