必须用 fade() 为 linear-gradient() 每个色标单独设透明度，而非整元素 opacity；因 opacity 会连带文字子元素变淡，而 fade() 生成 rgba() 精准控制背景层 alpha。
直接用 fade() 配合 linear-gradient() 就能实现，但必须分开处理：透明度由 fade() 施加在色值上，渐变结构由 CSS 原生函数承载；混用 opacity 或硬写 rgba() 字符串极易出错。
为什么不能对整个元素设 opacity 来模拟背景透明渐变
因为 opacity 会把文字、边框、子元素全部变淡，不是“背景透”，而是“整块糊”。你要的是下层内容（比如图片或容器底色）从渐变层里透出来，这只能靠在 linear-gradient() 的每个色标里单独控制 alpha —— 也就是用 fade(@color, 30%) 生成带透明度的色值，再喂给渐变函数。
常见错误现象：
- 文字发虚、图标变灰
- 响应式切换时突然全黑或全白
- 移动端 Safari 渲染空白（因 opacity 触发了怪异的图层合成）
如何用 fade() 安全生成渐变色标
fade() 是 Less 内置函数，专为这事设计：它接收任意合法颜色（#3498db、hsl(200,100%,50%)、甚至变量 @primary），输出标准 rgba() 字符串，且自动适配色彩空间，不丢饱和度、不偏色调。
- ✅ 正确写法：
background-image: linear-gradient(to right, fade(@primary, 0%), fade(@primary, 100%)); - ❌ 错误写法：
background: rgba(52, 152, 219, 0.3), linear-gradient(...)——rgba()不接受 HEX，Less 编译直接报错 - ⚠️ 注意：
fade(@color, 30)表示“最终透明度为 30%”（即 70% 不透明），不是“降低 30% 透明度”；传小数如0.3会编译失败 - 多色标时，每个色标都独立
fade()，别试图只调一次：fade(@primary, 20%), fade(@secondary, 80%), fade(@tertiary, 100%)
方向参数必须转义，否则渐变失效
Less 默认把变量当字符串处理。如果你写 @direction: to right; 然后拼进 linear-gradient(@direction, ...)，实际输出是 linear-gradient("to right", ...) —— 浏览器不认识带引号的方向，直接降级为纯色背景。
正确做法是用 ~"@{direction}" 去引号：
.bg-gradient(@direction: to bottom, @c1, @c2) {
background-image: linear-gradient(~"@{direction}", fade(@c1, 0%), fade(@c2, 100%));
}
关键点：
- 别用 %("@{direction}")，它只是格式化，不剥离引号
- @direction 默认设为 to bottom，兼容性最好；避免用旧语法如 bottom（仅 Android 4.3 及更早需要）
- 如果要支持老安卓，得额外加一行 -webkit-linear-gradient()，且方向要转成 bottom（去掉 to）
多层背景叠加时，渐变必须写在图片前面
CSS 背景绘制顺序是从前到后（第一个声明在最上层）。想让渐变盖在图片上（比如图文卡片标题遮罩），必须把 linear-gradient() 放在 url() 前面。
✅ 正确顺序：background-image: linear-gradient(to bottom, fade(#000, 90%), fade(#000, 0%)), url('bg.jpg');
❌ 错误写法：background-image: url('bg.jpg'), linear-gradient(...); —— 图片完全盖住渐变，啥也看不到
配套必须加：
- background-size: cover 防止图片拉伸变形
- background-position: center 避免图片偏移导致渐变错位
- 若需响应式调整透明度，抽成 CSS 变量：--alpha-start: 0.9;，然后用 fade(@color, var(--alpha-start))（注意：Less 编译期无法解析 var()，得手动生成 fallback）
最容易被忽略的是：渐变里的透明度变化必须锁定 RGB 或 HSL 值，只调 alpha。如果起始色标是 fade(black, 0%)、结束是 fade(white, 100%)，你得到的是黑白切换，不是“由透到实”的视觉效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
