简单说 通过CSS实现 文字渐变色 的两种方式
说明
这次的重点就在于两个属性，
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 ，是背景图 取值为渐变色，如果不知道渐变色，直接到这里看，
CSS3 渐变（Gradients）
-webkit-background-clip: text; 这行就要说到，background-clip 属性了 ，我们来看看 W3Cschool 上的说明
background-clip 属性 规定背景的绘制区域
语法 background-clip: 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属性，因为之前已经写过一篇介绍mask属性的文章了，
简单说 CSS中的mask—好好利用mask-image
这里就不很详细的介绍了，想详细了解的朋友可以看看上面这篇文章，一定会对你有所帮助的。
mask属性简单说，就是能让元素的某一部分显示或隐藏。
我们看张图就能明白，第二种方式实现的原理了
总结
这次说的这两种方式，应该算是很容易理解了，希望对大家有点帮助。
简单说 通过CSS实现 文字渐变色 的两种方式的更多相关文章
- 通过CSS实现 文字渐变色 的两种方式
说明 这次的重点就在于两个属性, background 属性 mask 属性这两个属性分别是两种实现方式的关键. 方式一 解释 <!DOCTYPE html> <html> & ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- iOS开发小技巧--自定义带有占位文字的TextView(两种方式)
自定义控件注意或框架注意:自己暴露在外面的属性,一定要重写setter,保证外界与内部的交互性 一.方案一:通过drawRect:方法将文字画到textView中,监听文字改变用的是通知中心(代理也可 ...
- 【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局
传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...
- [CSS] 子元素垂直居中的两种方式
1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...
- 获取select文本框的下拉菜单文字内容的两种方式
<body> <div class="box"> <select id="sel"> <option value=&q ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
随机推荐
- 网络流dinic板子
bool bfs(){ memset(deep,0,sizeof(deep)); queue<int>que; que.push(s); deep[s]=1; while(!que.emp ...
- Serverless 基本概念入门
从行业趋势看,Serverless 是云计算必经的一场革命 2019 年,Serverless 被 Gartner 称为最有潜力的云计算技术发展方向,并被赋予是必然性的发展趋势.Serverless ...
- CentOS6与CentOS7的网络区别
回顾:物理层 关注的是接口物理特性,传输介质数据链路层 MAC地址,数据帧,以太网,交换机网络层 IP地址,数据包,IP\ICMP\ARP协议,路由器传输层 TCP.UDP,端口号,数据段应用层 HT ...
- 关于Java集合框架总结
Java集合专门用来存放多个对象,方便程序处理数据.Java提供了多种集合类,以便满足不同的应用需求,这些集合类分为两大系列:Collection和Map List List的通用方法 boolean ...
- Windows 10操作系统针对不同环境下的安装方法
一.电脑系统能正常运行 1.解压win10镜像文件 到电脑的非系统分区,运行setup安装文件 2.点击setup应用程序,准备安装 3.准备安装 4.等待安装过程结束,重启即可. 二.光盘安装 1. ...
- E丢丢App重设计总结
E丢丢学习App是华夏大地教育可以有限公司旗下的一款产品,专为提升学历者打造,它整合了线上+跟踪的 (E平台)功能,方便工作人员随时随地管理账号.跟进学员:同时还可以随时了解教育行业的新闻资讯.一对一 ...
- [LC] 379. Design Phone Directory
Design a Phone Directory which supports the following operations: get: Provide a number which is not ...
- Netflix拒上戛纳电影节，能给国内视频产业什么启示？
当新事物诞生时,总是会遭到质疑,甚至是排斥!因为新事物的活力.潜力,都对保守的传统事物产生了极大的冲击.就像有声电影刚刚诞生时,一代"默片大师"卓别林就对其进行了激烈的反对.他认为 ...
- undefined reference to 问题汇总及解决方法 ----- 还有一种问题没有解决（可能是顺序问题）
1.链接时缺失了相关的目标文件 2.链接时缺少了相关的库文件 3.链接的库文件中有使用了另一个库文件 4.多个库文件链接顺序问题 5.定义与实现不一致 6.在c++代码中链接C语言的库 转载地址: ...
- 关于apache的几个常见问题
一.安装apache的时候总是不成功,提示:failed to open the winnt service manager 原因:软件安装时与windows7的"用户账户控制"( ...