background-clip: text单独无效，必须同时设置background（渐变/图片等非纯色）、color: transparent（及-webkit-text-fill-color: transparent）和display: inline-block/inline-flex，缺一不可；firefox至今不支持该属性。
background-clip: text 本身不能单独实现镂空效果，必须配合 color: transparent（或 -webkit-text-fill-color: transparent）和一个非纯色背景，否则文字要么看不见，要么看起来是实心的。
为什么只写 background-clip: text 没反应？
这是最常踩的坑：很多人复制了代码但没生效，原因就在这三件事缺一不可：
-
background必须存在（渐变、图片、视频容器都行，纯色不行） -
color: transparent必须显式设置（-webkit-text-fill-color: transparent是更稳妥的补充） -
display不能是block（会占满整行，破坏居中；推荐inline-block或inline-flex）
例如：.hollow { background: linear-gradient(45deg, red, blue); background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-block; } —— 少任何一项，效果就断掉。
background-clip: text 在 Firefox 中完全不生效怎么办？
Firefox 至今（2026年6月）仍不支持 background-clip: text，连 @supports (background-clip: text) 都检测不出。别指望 CSS 降级能全覆盖，务实做法是：
- 用
color: white或其他 fallback 颜色兜底（写在color: transparent前面） - 对关键场景，用 JS 检测是否支持：
const supportsTextClip = CSS.supports('background-clip', 'text'); - 若需兼容 Firefox 且背景是图片，改用
mix-blend-mode: multiply+ 白字黑底组合（但仅适用于静态背景，且对深色图效果差）
用图片/视频当背景时，文字缩放或滚动后镂空错位？
这是因为 background-clip: text 裁剪的是元素自身的 background，不是父容器背景。如果你把背景图设在 上，而文字在子元素里，那镂空出来的只是子元素自己的背景（通常是透明或默认色），根本“透”不到 body 的图。
正确做法：
- 把背景直接设在镂空文字元素上（
background: url(...) center/cover） - 加
background-size: cover和background-position: center防止拉伸偏移 - 避免用
background-repeat: no-repeat——重复反而有助于小字号下纹理连续
移动端 Safari 对大段文字渲染不稳定，建议单行标题优先使用，长段落慎用。
-webkit-text-stroke 能替代 background-clip: text 吗？
可以，但不是“替代”，是“换思路”：前者靠描边+透明填充模拟镂空，后者是真裁剪背景。区别很实际：
-
-webkit-text-stroke: 1px #000+color: transparent在 Chrome/Safari/Edge 新版里边缘锐利、不依赖背景，适合 logo 文字或强调轮廓 - 但它在 Firefox 和旧 Edge 中彻底失效，且描边宽度超过
1.5px时小字号易粘连 - 不能和
text-shadow混用，描边本身已是轮廓，叠加阴影会让边缘发虚
真正要“透过文字看到背后动态内容”，比如视频流或滚动视差背景，background-clip: text 是唯一选择——前提是接受它在 Firefox 中必然 fallback。
文字镂空不是视觉糖，是背景与文字层叠关系的一次精确调度。最容易被忽略的，是那个看似无关紧要的 display 值，以及把背景写在错的元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
