简单说 通过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> < ...
- 如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)
本章给大家介绍用css实现横向滚动条的两种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html代码: 全部 Adobe 微软 会计 绘画 Adobe 微软 会计 绘画 一. ...
- html 瀑布流样式,纯css如何实现瀑布流?css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流. 1.multi-column多列布 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
- 简单介绍python连接telnet和ssh的两种方式
本文主要介绍了python连接telnet和ssh的两种方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 Telnet 连接方式 #!/usr/bin/env p ...
- python抽奖简单小程序游戏_python——(分别用两种方式实现)公司年会抽奖小程序...
张三科技有限公司有300名员工,开年会抽奖,奖项如下 一等奖3名 : 泰国五日游 二等奖6名 :iphone手机 三等奖30名 :避孕套一盒 规则: 1.一共抽3次,第一次抽3等奖,第二次抽2等奖,第 ...
- html css图标怎么跟文字并排,科技常识:css图标与文字对齐的两种实现方法
今天小编跟大家讲解下有关css图标与文字对齐的两种实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css图标与文字对齐的两种实现方法 的相关资料,希望小伙伴们看了有所帮助. 在平时 ...
- 两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
问题描述 我们知道浏览器页面上的文字正常情况下我们是可以双击选中.或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的.但是有的时候,这种效果我们并不想要的,比如用户点快了的时候, ...
- 【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
- html多重边框,中间空白,【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
最新文章
- write/read/send/receive函数比较
- Luogu P5652 基础博弈练习题 (博弈论、图论)
- 当常规的算法都山穷水尽之后,你可以试试python中的SMOTE算法
- SSM框架之多数据源配置
- java对象数组排序的一种方式
- backtrack5渗透 笔记
- 汇编语言上机考试三星题——根据键盘输入调用子程序显示子程序的入口地址
- 添加MSN客服代码,可显示MSN在线和不在线,自动打开MSN聊天窗口
- Android Alarm机制分析
- 解锁图案-九宫格有多少种组合?安全吗?用程序来解答
- 2021美亚杯(个人赛)练习记录
- 【调剂】上海电力大学控制工程 、通信工程、人工智能等专业调剂信息
- 独立产品灵感周刊 DecoHack #029 - 随便逛逛谷歌街景
- 腾讯IM实战:低代码超快实现即时通讯录
- 业绩下滑、利润缩水,除了一直涨价,涪陵榨菜还有什么招数?
- Hdoj 2635 Dragon Balls
- ZYNQ7000学习(十八)多路 PWM 原理分析以及实现试验
- 【slf4j】在Java中如何定义优雅的Log日志
- 计算机网络——链路传输时延/速率和传播时延/速率的区分
- linux csh 安装,linux安装gcc的shell脚本
热门文章
- 电脑使用小常识(2):新手装软件指南,防止流氓软件
- android 音视频录制
- 计算机app无法删除,文件夹删不掉怎么办?
- 2021年实验中学高考成绩查询,2021年北京高中排名,高中高考成绩排名一览表
- Python数据分析实战01-商铺数据的清洗和存储(附资源文件)
- Baby Sign Language
- Ubuntu18.04添加vim配置
- C语言程序出现malloc(): corrupted top size异常中止
- 验证整数和小数的正则表达式
- 海思Hi3521/Hi3520A/Hi3520D/Hi3515A/Hi3515C U-boot 移植应用 开发指南