mix-blend-mode对直接加无效，因其需与背后内容混合，而默认无背景可混；须置于有色容器中、确保同层叠上下文且视觉重叠，并注意移动端兼容性与色彩空间差异。
mix-blend-mode 为什么对 <img> 直接加没效果
因为 mix-blend-mode 不是给图片“上色”，而是让当前元素和它**背后的内容**混合。而 <img> 默认处于层叠最顶层，背后只有父容器背景（如果有的话）或透明空白——没有可混合的“底色”。常见错误就是写 img { mix-blend-mode: multiply; }，但父容器是纯白背景，结果什么变化都看不到。
更隐蔽的坑是：父容器若触发了新层叠上下文（比如用了 transform、opacity: 0.99、backdrop-filter），mix-blend-mode 就会被隔离，只能跟一个“空背景”混合，文字或图片瞬间变黑/白/不可见。
- 必须确保图片所在容器有可见背景（渐变、颜色、另一张图，甚至视频）
- 图片容器需显式声明
isolation: isolate，且必须加在**直接父级**，不能加在 body 或中间 wrapper 上 - 别用
background-image替代<img>后还套mix-blend-mode—— 它对 background 无效，该用background-blend-mode
实现文字“镂空露出图片”的最小可靠结构
想让文字像窗口一样透出背后的图片，核心不是给文字加背景图，而是让文字本身参与混合——靠纯色文字 + 混合模式 + 底层图片共同作用。
关键三行 CSS：
.bg-container {
isolation: isolate;
}
.bg-container img {
position: absolute;
width: 100%; height: 100%;
object-fit: cover;
}
.text-hollow {
mix-blend-mode: screen;
color: #000;
}
-
.bg-container必须是文字元素的**直接父级**，且自身要承载图片（或视频、渐变）作为底层 - 文字颜色只能用纯黑
#000或纯白#fff；灰度值（如#666）会导致混合结果不可控 - 绝对不要给文字加
background-color（除非是rgba()半透），否则会遮挡底层，混合失效 - 移动端尤其注意：iOS Safari 14–15 在动画中切换
mix-blend-mode值会失效，建议固定模式，改用动态调background-color或opacity
用 background-clip: text + mix-blend-mode 做图片填充文字
这是另一种路径：把图片“塞进”文字轮廓里，再让它和页面其他内容混合。它不依赖底层图片容器，但浏览器兼容性更窄。
必需组合：
-
background-image设置图片（支持url()或渐变） -
background-clip: text（必须带-webkit-前缀）裁剪背景到文字形状 -
-webkit-text-fill-color: transparent让文字内容透明，露出背景 -
mix-blend-mode控制该文字层与它下方元素（比如 body 背景、相邻 div）的混合效果
例如文字在深色背景上想提亮边缘，可用 mix-blend-mode: screen；想压暗纹理细节，用 multiply。注意：此时文字已无“颜色”，color 属性无效，所有视觉表现由背景图 + 混合模式决定。
哪些 mix-blend-mode 值在实际项目中最稳
别贪全，不同值在各平台表现差异极大：
-
multiply：深色背景+浅色文字时最安全，白色区域变透明，黑色保留，适合图文叠加 -
screen：黑色变透明，适合视频/动图背景上的“挖空文字”，iOS 和安卓主流 WebView 支持好 -
overlay：自动根据底色切换multiply或screen，复杂渐变背景上不易丢对比度，推荐首选 - 立刻避开：
color-dodge（遇黑过曝成白）、exclusion（部分安卓 WebView 渲染为纯黑）、hard-light（Safari 偏色明显）
真正容易被忽略的点是：混合效果高度依赖色彩空间。sRGB 和 display-p3 图片在相同 mix-blend-mode 下可能呈现完全不同的明暗响应，尤其在 iOS 设备上——测试务必用真机，且图片尽量统一导出为 sRGB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
