mix-blend-mode 实现文字镂空需满足：文字与背景图分属不同图层，文字容器设 isolation: isolate 且非背景父级；白字+screen模式适配暗背景，黑字+multiply适配亮背景；边缘毛边可用 text-shadow 微调。
mix-blend-mode 实现文字镂空的前提条件
必须让文字和背景图处于不同图层，且文字所在元素不能是背景图的父容器——否则 mix-blend-mode 会和父层背景混合，而不是和底层背景图混合。常见错误是把文字放在带 background-image 的 <div> 里，还设 <code>mix-blend-mode: screen，结果啥也没透出来。
- 文字用单独的
<h1></h1>或<p></p>，定位在背景图上方（比如用position: absolute） - 背景图放在一个独立容器（如
<div class="bg">），z-index 低于文字层<li>文字颜色设为纯白（<code>color: white）或纯黑，取决于想用哪种混合模式 - 必须启用
isolation: isolate在文字容器上，否则混合可能被父层截断 - 镂空要“干净”，优先用
screen+ 白字 + 暗背景图 - 若背景图明亮（比如蓝天），改用
multiply+ 黑字 - 不要依赖
overlay或soft-light，它们不产生明显镂空感 - 加
text-rendering: optimizeLegibility或-webkit-font-smoothing: antialiased可能加重问题 - 更可靠的做法是关掉子像素渲染：
-webkit-font-smoothing: subpixel-antialiased（仅 Safari）或直接用font-smooth: never（已废弃，不推荐） - 实际有效方案：给文字加极细描边（
text-shadow: 0 0 1px black），用对比色压住毛边；或者换用backdrop-filter+clip-path组合（但那是另一条路） - 必须加
isolation: isolate到文字父容器，不能只写在文字元素上 - 如果要支持 iOS 12 或 Firefox
+ mask，或 CSSbackground-clip: text+-webkit-text-fill-color: transparent -
mix-blend-mode方案不是“一写就跑”，得测真机滚动、缩放、深色模式切换下的表现
screen / multiply / exclusion 混合模式选哪个
screen 最常用：白色文字变透明，露出底图；黑色文字变亮，不适合镂空。所以文字必须是 white，背景图得有足够暗部才能显形。
multiply 反过来：黑色文字变透明，适合深色背景图+黑字场景；白字会变暗，不透。
exclusion 对比更柔和，黑白都部分透明，但兼容性差（Safari 16.4+ 才支持），且效果不易控。
字体描边和抗锯齿带来的边缘毛边问题
mix-blend-mode 本身不处理边缘，文字抗锯齿像素会参与混合，导致镂空边缘发灰、模糊或半透。
Firefox 和旧版 Safari 的兼容性现实
Firefox 支持 mix-blend-mode 从 32+ 开始，但对 position: fixed 容器里的混合有渲染 bug：滚动时镂空错位。Safari 9+ 支持，但 iOS 13 之前不支持 isolation: isolate，导致混合失效。
真正起作用的从来不是混合模式本身，而是图层结构是否干净、文字颜色是否匹配模式逻辑、以及你有没有在 Safari 里漏掉 isolation。
