方案 A · background-clip: text

Kestrel
Works

标题不是"有颜色的字",是一扇形状为文字的窗。 而且它仍然是真文字——可选中、可搜索、读屏能读,这是它比"放一张标题图"高级的关键。

方案 B · mask 挖穿盖层(视频走这条)

background-clip 吃不了 <video>。 反过来做:媒体铺底,上面盖一层纯色,用文字形状把盖层挖穿。 这里用旋转的 conic 渐变冒充视频,真项目里换成 <video muted playsinline> 即可。

方案 B 的 SVG 遮罩里不继承页面 CSS、也加载不到 webfont, <text> 必须写死字体;要彻底摆脱字体依赖就把标题转成 <path> (代价:文字不可选中,得补 aria-label——上面这块就是这么做的)。
对比度无法保证:文字颜色取决于背后的媒体,深色段落上可能读不清。 它是标题不是正文,别把关键信息只放这里。
强制高对比模式下 color:transparent 会让字彻底消失,已用 forced-colors 兜底。
配色排版是占位。进项目要跟项目的设计体系走(库规范铁律 6)。