必须同时设置 color: transparent 和 -webkit-background-clip: text（及 background-clip: text），Safari 还需 -webkit-text-fill-color: transparent，否则背景无法透过文字显示。
不设 color: transparent，background-clip: text 就等于没写。 浏览器确实识别了这个属性，但文字本身仍有默认颜色（比如黑色），它会完全盖住背景，导致你看到的只是实色文字，而不是“背景透出来”的效果。
为什么文字还是纯色，不是渐变？
最常见原因就是漏掉了关键一步：让文字本身变透明。仅靠 background-clip: text 或 -webkit-background-clip: text 无法让背景显现——它只定义“把背景裁成文字形状”，不负责隐藏文字颜料。
- 必须显式写
color: transparent，不能依赖继承或重置样式 - Bootstrap 等框架的
.text-primary、.text-dark类会强制覆盖color，得先移除这些类 - 如果用了全局选择器如
p { color: #333 }，它的优先级可能高于你的渐变规则，需用更具体的选择器覆盖
Safari 中文字直接不见了？
旧版 Safari（iOS 12.5.7、Safari 9–13）不仅要求 -webkit-background-clip: text，还额外需要 -webkit-text-fill-color: transparent。只写 color: transparent 在某些 WebKit 内核下会被忽略，文字 fallback 成黑色或干脆不渲染。
- 两个声明都要写，且
-webkit-text-fill-color: transparent不能省 - 顺序无关紧要，但建议放在
color: transparent后面，避免被意外覆盖 - 别加
opacity: 0或visibility: hidden——这会让整个元素不可见，不是“透明文字”
写了 color: transparent 还是没效果？检查这些干扰项
即使颜色设对了，其他 CSS 属性也可能让 background-clip: text 失效：
-
opacity、transform（包括translateZ(0)）、filter、will-change都会触发合成层，Safari 直接禁用文字裁剪 - 父容器若有
filter: drop-shadow()或will-change: transform，子元素的background-clip: text也会退化 - 如果背景是
background-image: linear-gradient()，但同时又写了background-color或用了background简写，渐变可能被覆盖
真正起作用的最小闭环就三行：-webkit-background-clip: text、background-clip: text、color: transparent；Safari 下还得补上 -webkit-text-fill-color: transparent。其余任何样式，只要碰上合成、覆盖、继承冲突，都可能让这三行变成摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
