位置: IT常识 - 正文

CSS 实现文字渐变色(css字体设置渐变色)

编辑:rootadmin
CSS 实现文字渐变色 1、background 属性设置渐变色

推荐整理分享CSS 实现文字渐变色(css字体设置渐变色),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css文字渐变色代码,css文字渐变色代码,css字体颜色渐变色,css实现文字颜色渐变,css实现文字渐变,css实现文字颜色渐变,css文字渐渐出来的效果,css文字渐渐出来的效果,内容如对您有帮助,希望把文章链接给更多的朋友!

1、源码示例:

.text {background-image: linear-gradient(to right, pink, purple);color: transparent;-webkit-background-clip: text;}CSS 实现文字渐变色(css字体设置渐变色)

2、实现原理: (1)background-image :为该文字区域设置渐变背景色。 语法:background-image: linear-gradient(direction, color-stop1, color-stop2, …); 参数:渐变方向、开始颜色、结束颜色

linear-gradient(blue, red);/* 默认从上到下,蓝色渐变到红色 */linear-gradient(to left top, blue, red);/* 从右下到左上、从蓝色渐变到红色 */linear-gradient(45deg, blue, red);/* 渐变轴为45度,从蓝色渐变到红色 */linear-gradient(0deg, blue, green 40%, red);/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

(2)color:transparent :将文字颜色设置成透明色。 (3)background-clip:text 将背景裁剪成文字前景色。 ⚠️注:background-clip:text 不支持ie 属性: border-box(默认值。背景绘制在边框方框) padding-box (背景绘制在衬距方框) content-box (背景绘制在内容方框) text(背景绘制在文字里)

#example1 { border: 10px dotted black; padding:10px;background-image: linear-gradient(to right, yellow, pink 50%)}#example2 { border: 10px dotted black; padding:10px; background-clip: padding-box;background-image: linear-gradient(to right, yellow, pink 50%)}#example3 { border: 10px dotted black; padding:10px; background-clip: content-box;background-image: linear-gradient(to right, yellow, pink 50%)}#example4 { border: 10px dotted black; padding:10px; background-clip: text;-webkit-background-clip:text;color: transparent;background-image: linear-gradient(to right, yellow, pink 50%)}

2、-webkit-mask图片蒙版效果制作渐变色

.text-gradient { position: relative; color: pink; font-size: 20px;}.text-gradient:before { content: attr(text); position: absolute; z-index: 10; color: orange; -webkit-mask: linear-gradient(to right, transparent, orange); }<div text="文字渐变" class="text-gradient">文字渐变

实现原理: (1).text-gradient:before :生成一个新元素。 (2)content:attr(text): 让新元素的内容与原文本的内容相同, (3)color:orange 将新元素文本设置为橙色 (4)-webkit-mask: linear-gradient(to right, transparent, orange):为新元素添加了一个从左到右,透明到橙色的渐变遮罩,before 元素中与mask的 transparent 的重叠部分变成了透明色。 before 新元素与原 div 蓝色文本叠加,形成了从左至右从蓝色到橙色的渐变效果 ⚠️注:mask 不支持IE,目前仅有-webkit-前缀的谷歌及safari浏览器 -webkit-mask属性:

demo1 { background : url("images/logo.png") no-repeat; -webkit-mask : url("images/mask.png");}

mask动态模板遮罩案例参考

本文链接地址:https://www.jiuchutong.com/zhishi/300023.html 转载请保留说明!

上一篇:Vue3 中 导航守卫 的使用(vue-router导航守卫)

下一篇:简单易懂 关于nextTick()的理解(关于简单的绘画)

  • 华为录音机删除了怎么恢复(华为录音机删除的录音怎么恢复没有云空间)

    华为录音机删除了怎么恢复(华为录音机删除的录音怎么恢复没有云空间)

  • 知道一个人的微信号怎么查电话号码(知道一个人的微博可以查到什么)

    知道一个人的微信号怎么查电话号码(知道一个人的微博可以查到什么)

  • 微信视频动态时长限制(微信视频动态啥意思)

    微信视频动态时长限制(微信视频动态啥意思)

  • airpods2左耳无法入耳检测(airpods2左耳无法使用)

    airpods2左耳无法入耳检测(airpods2左耳无法使用)

  • 头条号展现量是什么(头条展现量是推荐量吗)

    头条号展现量是什么(头条展现量是推荐量吗)

  • 快手仅作者的好友可评论(快手仅作者的好友可评论bug)

    快手仅作者的好友可评论(快手仅作者的好友可评论bug)

  • 未成年微信限额多少(未成年微信限额了钱怎么转出来)

    未成年微信限额多少(未成年微信限额了钱怎么转出来)

  • 红包已领取但是没到账(红包已领取但是没收到)

    红包已领取但是没到账(红包已领取但是没收到)

  • 短信没声音在哪里设置(手机短信没有声音提示了怎么回事)

    短信没声音在哪里设置(手机短信没有声音提示了怎么回事)

  • 微信头像模糊是拉黑了吗(微信头像模糊是何原因)

    微信头像模糊是拉黑了吗(微信头像模糊是何原因)

  • 电脑主要的五大件(电脑有哪五个)

    电脑主要的五大件(电脑有哪五个)

  • cha fan是什么接口(cha_fan1什么意思)

    cha fan是什么接口(cha_fan1什么意思)

  • 蜂鸟众包什么叫优质单(蜂鸟众包什么叫卡单)

    蜂鸟众包什么叫优质单(蜂鸟众包什么叫卡单)

  • 苹果11pro有夜景模式吗(苹果11pro夜景拍照模式在哪)

    苹果11pro有夜景模式吗(苹果11pro夜景拍照模式在哪)

  • 手机如何设置时间(手机如何设置时间提醒功能)

    手机如何设置时间(手机如何设置时间提醒功能)

  • 华为怎么开启螺旋仪(华为怎么开启螺丝孔)

    华为怎么开启螺旋仪(华为怎么开启螺丝孔)

  • 华为手机黑屏怎么打开手电筒(华为手机黑屏怎么强制重启)

    华为手机黑屏怎么打开手电筒(华为手机黑屏怎么强制重启)

  • 小米9pro5g支持sa吗(小米9pro5g支持视频输出吗?)

    小米9pro5g支持sa吗(小米9pro5g支持视频输出吗?)

  • 华为日历在哪里设置(华为日历怎么设置)

    华为日历在哪里设置(华为日历怎么设置)

  • ms excel是什么意思(microexcel是什么意思)

    ms excel是什么意思(microexcel是什么意思)

  • 一加6t有没有语音助手(一加6t有没有语音控制)

    一加6t有没有语音助手(一加6t有没有语音控制)

  • 剪映卡点视频怎么做(剪映卡点视频怎么调整时间)

    剪映卡点视频怎么做(剪映卡点视频怎么调整时间)

  • 脱机使用打印机是什么意思(脱机使用打印机要勾选吗)

    脱机使用打印机是什么意思(脱机使用打印机要勾选吗)

  • iqoo防水性能怎样(iqoopro防水测试)

    iqoo防水性能怎样(iqoopro防水测试)

  • 2060显卡配什么cpu呢(2060显卡配什么cpu最合适)

    2060显卡配什么cpu呢(2060显卡配什么cpu最合适)

  • 投资性房地产税务上可以计提折旧吗
  • 递延所得税计算题
  • 来料加工账务处理举例
  • 盘盈盘亏处理意见和建议
  • 非限定性净资产相当于本年利润吗
  • 股东不任职
  • 公司费用计入什么科目
  • 个税填报后怎么撤销申报
  • 税控盘反写显没有数据怎么处理
  • 个税累计扣除项目合计2712.5是什么
  • 财务报表可以补充分类吗
  • 以前年度成本多入了怎样调整
  • 残值要不要做分录
  • 待认证转进项税额转出会计分录
  • 收到美元货款兑换人民币流程
  • 批发零售企业用什么软件好
  • 公司在外地
  • 年度企业所得税申报时间
  • 商品赠送的内账怎么做账
  • 财务考核指标表
  • 公司账户存款
  • php播放本地音乐
  • 无线路由器wifi指示灯不亮
  • 解聘员工补偿金能拖欠吗
  • thinkphp设置伪静态
  • 自然保护什么意思
  • 前端打包后生成文件
  • 车间使用的辅助材料
  • php 个人博客 源代码 简单
  • 固定资产到期日
  • 会引起所有者权益总额变动的是
  • 企业的生产成本包括哪些
  • 公司承担员工的费用,员工违规吗
  • 物权转移的几种情形
  • SQL Server 在Management Studio中使用Web浏览器
  • mongodb聚合函数mapreduce
  • 农业用肥尽量不选择
  • sqlldr 函数
  • 增值税最高开票限额
  • 一次性伤残补助金怎么计算
  • 财政补贴收入要交增值税税率
  • 资产负债表中的固定资产怎么算
  • 加盟费收入如何入账
  • 企业固定资产可以不提折旧吗
  • 怎么冲减多计提的工会经费
  • 计提的工会经费年底有余额咋处理
  • 分期收款销售商品,收到本期贷款50万元
  • 交通运输业安全经费提取的会计处理
  • 厂房的使用寿命
  • 预付卡开不征税发票
  • 存货的实际成本法
  • 老板个人借款要纳税吗
  • 企业的管理费用包括
  • win8.1所有程序在哪里
  • 电脑右下角windows设置在哪
  • ubuntu搭建nginx服务器教程
  • linux限制用户登录
  • red hat linux怎么用
  • centos下netconfig 的安装方法
  • win 8.1 preview ISO镜像安装方法简易教程
  • ssms.exe是什么进程
  • win8.1安装更新卡住
  • win10升级准备就绪需要多久
  • 使用jquery实现的项目
  • jquery实现select选择框内容左右移动代码分享
  • Android自定义控件高级进阶与精彩实例
  • shell脚本题
  • Unity3D游戏开发培训课程大纲
  • opengl房子建模
  • jquery左右移动动画效果
  • 了不起的Nodejs 将JavaScript进行到底
  • javascript异步编程
  • javascript开发平台
  • 用nodejs实现三个类,动物基础类(有跑的函数,吃的函数)
  • python字典合并 同key
  • 用python画roc曲线
  • 深入浅析是什么意思
  • 河南城乡居民医疗保险电话
  • 网上报税失败怎么办
  • 购房税率是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设