说明

这次的重点就在于两个属性， 
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. sublime的Package Control的安装及使用

    一.快速安装 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码(注意下面代码为一行): import urllib.request,os; pf = ...

  2. java8 用法小结

    一 简单的stream parallelStream慎用,除非你知道它内部干了什么 List<Integer> list = Arrays.asList(1, 2, 3, 4, 5, 6, ...

  3. 排序算法大汇总 Java实现

    一.插入类算法 排序算法的稳定性:两个大小相等的元素排序前后的相对位置不变.{31,32,2} 排序后{2,31,32},则称排序算法稳定 通用类: public class Common { pub ...

  4. 如何使用加多宝(jdb)在linux下调试Java程序

    毕业时写了一段时间的C,那时候调试使用gdb,后来转了java,当时就想java程序怎么调试,找了一下,果然,那就是jdk自带的jdb windows里是这样的 Linux下是这样的 一般我在linu ...

  5. 22 Years of KDE

    22 Years of KDEhttps://timeline.kde.org/ http://www.kdedevelopers.org/

  6. 6-Perl 标量

    1.Perl 标量标量是一个简单的数据单元.标量可以是一个整数,浮点数,字符,字符串,段落或者一个完整的网页.以下实例演示了标量的简单应用:实例#!/usr/bin/perl$age = 20; # ...

  7. Upload Image to .NET Core 2.1 API

    原文地址:https://www.codeproject.com/Articles/1256591/Upload-Image-to-NET-Core-2-1-API using System; usi ...

  8. django 中间键重定向

    1,定义和注册中间件 在注册的中间件中使用: from django.http import HttpResponseRedirect '''下面的书写方法会陷入死循环,所以必须加判断条件只调用一次' ...

  9. IOS 伪类:active失效

    IOS中不兼容:active伪类,所以在状态控制上就会有问题,解决办法是,添加一个空的点击事件: 移动端添加:ontouchstart <a class="m-btn" on ...

  10. export CommonJS AMD ES6

    export https://www.cnblogs.com/fayin/p/6831071.html 导入文件: a  -  b  -  c  ,对象隔代消失,可转成函数返回  导入模块对象(命名) ...