mix-blend-mode失效主因是层叠上下文被父容器意外切断，需确保前景元素与正下方backdrop处于同一stacking context；常见干扰包括transform、filter、opacity
mix-blend-mode 不是给重叠元素“加个滤镜就完事”的属性——它只在同层叠上下文（stacking context）中、有真实内容的前景元素与它正下方的 backdrop（背景内容）之间生效。如果你给两个并列的 <div> 分别设了 <code>mix-blend-mode: multiply，它们彼此不会混合，也不会和父容器背景混合，除非满足严格前提。
为什么两个重叠的div设了mix-blend-mode却没反应？
根本原因不是写法错，而是层叠上下文被意外切断。常见触发点包括：
- 父容器用了
transform、filter、opacity: 0.99或will-change: transform—— 这些都会创建新 stacking context，把子元素“关进小黑屋”，它们只能跟这个新 context 的透明背景混合，而不是你想要的底图或文字 - 其中一个元素是伪元素（如
::before），但没设置content: ""+display: block，导致它无渲染内容，不参与混合计算 - 目标元素本身只有
background-image，没有子节点、文字或 SVG ——mix-blend-mode对 background 图像无效，它混合的是“元素最终渲染出的像素”，不是背景图层
验证方法：临时移除父级所有可能创建新 stacking context 的样式，或给父容器加 isolation: isolate 强制维持外层上下文（注意：这本身也会创建新 context，慎用）。
想让文字和图片叠加出multiply效果，该怎么组织DOM？
必须确保文字是“前景”，图片是它正下方的“backdrop”，且二者处于同一 stacking context。推荐结构：
<div class="hero-bg"> @@##@@ <h1 class="title">标题</h1> </div>
对应 CSS：
.hero-bg {
position: relative;
}
.hero-bg img {
display: block;
width: 100%;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
color: white; /* 确保有可渲染内容 */
}
- 不用
background-image，改用<img src="bg.jpg" alt="">标签——它是真实内容，能参与混合 - 避免给
.hero-bg加transform或filter；若需动画，加在.title自身上 -
color: white不可省：纯透明色或rgba(0,0,0,0)会导致无像素输出，混合失效
multiply / screen / overlay 在实际页面中效果差异大，怎么选？
浏览器实现基于 sRGB，且不做 Alpha 预乘校正，所以 Photoshop 里调好的参数直接搬过来常会偏灰、过曝或失真：
-
multiply：适合深色文字压浅色图，但纯白区域会完全透明；若底图含大量灰阶，暗部易被吃掉——建议搭配background: #000+opacity: 0.4替代半透明黑块 -
screen：提亮快，但稍亮的底图就发灰；加opacity: 0.7可控强度，比调颜色更可靠 -
overlay：对中间调增强最强，适合标题强化，但会放大噪点；低分辨率图慎用，尤其在移动端 -
difference：调试专用，翻转颜色查对齐，上线前必须删掉——它会让彩色信息完全不可读
移动端 iOS Safari 虽支持 mix-blend-mode，但 fixed 定位 + 混合组合极易白屏，真机测试不可跳过。
mix-blend-mode 失效时最该先检查什么？
不是查语法，也不是换浏览器，而是立刻打开 DevTools → Elements 面板，逐级往上点父节点，看 computed 样式里有没有 “transform”、“filter”、“opacity isolation: isolate”。只要其中任意一个存在，当前元素就大概率被隔离了。修复方式不是硬加 isolation: auto（它无效），而是把需要混合的元素提到更高层级，或重构 DOM 让它们共享同一个干净的 stacking context。
