通过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
,是背景图 取值为渐变色
-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实现 文字渐变色 的两种方式的更多相关文章
- 简单说 通过CSS实现 文字渐变色 的两种方式
说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...
- 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划隔横线的两种方法
css划隔横线的两种方法 方法一:用DIV,代码如下:(推荐此方法) <div style="width:800px;height:1px;margin:0px auto;pa ...
- css清除浮动的两种方式(clearfix和clear)
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
随机推荐
- 部署开源mock平台doclever简单叙述
一.访问官网: http://doclever.cn/controller/index/index.html 二.doclever作用(重点:mock带有转发功能) DOClever是一个可视化接口管 ...
- git 命令 git status add rm commit mv
1.查看 git 仓库文件改动状态 Git 仓库内文件改动有 4 种状态,除了 Unmodified 状态的文件因为并未改动默认没有状态不做显示之外,其他文件改动状态都可以通过 git status ...
- Kafka如何保证百万级写入速度以及保证不丢失不重复消费
一.如何保证百万级写入速度: 目录 1.页缓存技术 + 磁盘顺序写 2.零拷贝技术 3.最后的总结 “这篇文章来聊一下Kafka的一些架构设计原理,这也是互联网公司面试时非常高频的技术考点. Kafk ...
- Linux正则表达式扩展部分第一波深度实践详解
扩展的正则表达式(Extended Regular Expressions): 使用的命令:grep -E 以及 egrep [了解即可] 1)+ 表示重复”一个或一个以上“ 前面的字符(*是0或多 ...
- sql server 中 like 中文不匹配问题解决就这么简单
原文:sql server 中 like 中文不匹配问题解决就这么简单 MS-SQL Server select * from Book where BookName like'%C语言%' 在SQ ...
- GitHub 将源代码保存在北极洞穴,至少使用 1000 年!
最近,GitHub分享了开放Arctic Code Vault的计划,该计划旨在存储和保存Flutter和TensorFlow等开源软件. 所有开放源代码项目的代码都将存储在胶片上,该胶片每帧包含88 ...
- spring-boot 使用 jackson 出错(五)
环境 jdk 6 tomcat 6.0.53 sts 4.4.2 maven 3.2.5 原因 spring boot 1.5.22.RELEASE 默认使用的 jackson 的版本是 2.8.x, ...
- XXLJOB2.1.0数据源配置踩坑记录
最近在看XXLJOB,因为截至到发文时间最新的版本是2.1.0而且需要建立的数据库与Quartz解耦了,所以就用了最新的版本. 首先说一下踩坑过程: 代码开发完成之后,在定时跑的时候第一次跑的多数失败 ...
- PAT A1025 PAT Ranking(25)
题目描述 Programming Ability Test (PAT) is organized by the College of Computer Science and Technology o ...
- Django项目中添加富文本编辑器django-ckeditor
django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...