说明

这次的重点就在于两个属性， 
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. 部署开源mock平台doclever简单叙述

    一.访问官网: http://doclever.cn/controller/index/index.html 二.doclever作用(重点:mock带有转发功能) DOClever是一个可视化接口管 ...

  2. Design Hit Counter

    Design a hit counter which counts the number of hits received in the past 5 minutes. Each function a ...

  3. 【ActiveReports 大数据分析报告】2019国庆旅游出行趋势预测

    今年国庆假期全国接待国内游客人数有望达到8亿人次! 随着2019国庆小长假的临近,不少游客已经开始着手规划假期出游路线.据权威机构发布的<2019国庆旅游趋势预测报告>显示,今年“十一黄金 ...

  4. 避免同一个文件被#include多次，可以用以下两种方式

    1.#ifndef方式 2.#pragma once方式 方式一: #ifndef  _SOMEFILE_H_ #define _SOMEFILE_H_ ... ...//一些声明语句    #end ...

  5. [SDOI2011]消耗战 题解

    题面 虚树的模板题: 虚树的思想是只保留有用的点(在这道题目里面显然是标记点和lca),然后重新构建一棵树,从而使节点大大减少,优化复杂度 我们维护一条链(以1号点为根),这条链左边的所有在虚树上的位 ...

  6. matplotlib库绘制条形图

    练习一:假设你获取到了2017年内地电影票房前20的电影(列表a)和电影票房数据(列表b),那么如何更加直观的展示该数据? a = ["战狼2","速度与激情8" ...

  7. golang 环境配置 over centos7

    基本编程环境 下载go1.8压缩包,解压后存放至目录~/work/下. 编辑~/.bashrc,添加如下三行在尾部 执行 source ~/.bashrc  配置vim + go  下载Vundle ...

  8. .Net面试题一

    1.进程和线程的区别是什么? 答:https://www.cnblogs.com/renzhuang/articles/6733461.html2.请列举ASP.Net页面之间传递值的几种方式?列出3 ...

  9. django 支持跨域请求配置

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

  10. c# winfrom 界面设计

    1.在用DotnetBar的RibbonControl时,界面最大化时,会把电脑桌面的任务栏遮盖住: 解决办法:在load事件中写入: , Screen.PrimaryScreen.WorkingAr ...