【css】实现渐变文字效果(linear-gradient&radial-gradient)

效果图

实现方法

关键代码:

javascript 复制代码
    background: linear-gradient(0deg,#d3ae13 0%,white 44%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

注释掉:-webkit-background-clip: text;这行之后,下图就是待叠加的样式。(有点类似PS的蒙版或者图层叠加之类的)

linear-gradient

linear-gradient() 是CSS的一个渐变函数,用于在元素的背景中创建线性渐变效果。它可以让你在元素的背景中实现从一种颜色到另一种颜色的平滑过渡。

  • 该函数可以接受多个参数,其中最重要的是方向颜色

    • 方向参数可以指定渐变的方向。
      • 使用角度值(如45deg表示从左上角到右下角)
      • 关键词(如to right表示从左到右)来定义方向。例如:
    • 颜色参数可以指定渐变的起始颜色和结束颜色,也可以包含中间的颜色位置。
      • 你可以使用具体的颜色值(如红色、#ff0000)
      • 使用颜色关键词(如red、blue)来定义颜色。你还可以通过设置百分比或距离值来指定中间颜色的位置。例如:
javascript 复制代码
background: linear-gradient(red, yellow 50%, green);

此示例将创建一个从红色到绿色的渐变,中间经过黄色,黄色占据整个渐变的50%位置。

通过构建背景图学习CSS径向渐变

补充一个径向渐变的教程,用来做一些平铺背景还是蛮好看和实用的。

参考

用css实现文字字体颜色渐变的三种方法 不知道为什么使用 background-clip 这个属性时不能生效。所以没有用这个方法。

相关推荐
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6662 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey2 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
牧杉-惊蛰2 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app