mix-blend-mode加在上没反应，因其需与背后内容混合，而默认浮于顶层，背后无内容可混；常见问题包括父容器纯白背景、触发新层叠上下文或误用background-image。
mix-blend-mode 为什么加在 <img> 上没反应
因为 mix-blend-mode 不是给图片“上色”，而是让它和**背后的内容**混合。而 <img> 默认浮在最上层，背后只有父容器背景（如果有的话）或透明空白——没有可混的东西，自然没效果。
常见翻车点：
- 直接写
img { mix-blend-mode: multiply; }，但父容器是纯白背景 → 混了个寂寞 - 父容器用了
transform、opacity: 0.99或filter→ 触发新层叠上下文，混合被隔离断开 - 误把
background-image当成<img>用 →mix-blend-mode对 background 无效，得换background-blend-mode
实操解法：把图片放进一个带颜色/渐变背景的容器里，再让图片自身参与混合；或者用 ::before 伪元素盖在图片上，设 mix-blend-mode，图片当 backdrop。
怎么用 ::before + mix-blend-mode 做双色调效果
双色调不是调一张图，而是靠两层叠加分别影响阴影和高光区：
- 阴影层用
mix-blend-mode: multiply：深色区域吃色明显，浅色几乎不变 - 高光层用
mix-blend-mode: screen：亮部提亮并染色，暗部基本不受影响 - 两层都设
position: absolute、宽高100%、z-index: 1，确保盖住图片 - 颜色必须带 alpha，比如
rgba(255, 0, 100, 0.6)；不透明会糊掉纹理细节 - 别用
overlay做主层——它自动判断明暗区，在中间灰阶处过渡生硬，容易断层
mix-blend-mode 能不能加 transition 或动画
不能。它是 CSS 规范定义的「不可动画属性」，浏览器根本不允许插值。写成这样：
div {
mix-blend-mode: multiply;
transition: mix-blend-mode 0.3s;
}
div:hover {
mix-blend-mode: screen;
}
结果是瞬间切换，DevTools 还会标黄警告 transition ignored。
想做出“混合动效”的错觉，只能间接控制参与混合的内容本身：
- 用
background-color或background-image动画配合固定mix-blend-mode: overlay - 对前景元素做
opacity动画：半透明 +mix-blend-mode会改变混合权重，产生呼吸感 - 用
transform: translate()移动前景层，使其与静止背景持续发生像素级重叠变化 - 避免在动画中触发新层叠上下文（如加
opacity: 0.99），否则混合会突然中断
移动端和 Safari 的坑特别多
iOS Safari（尤其 15.4–16.3）会在滚动或动画触发时临时禁用 mix-blend-mode: difference，导致文字闪黑、错色甚至整块不渲染；Android WebView 对层叠上下文也极度敏感。
关键对策：
- 在混合元素的**直接父容器**加
isolation: isolate，强制它成为独立上下文，让子元素能读取真实背后颜色 - 优先选
multiply、screen、overlay—— 兼容性最好，行为最稳；color-dodge在深色主题下容易过曝成全白 - 给容器加
will-change: mix-blend-mode（仅限真正动画的元素，别滥用） - 真机测试滚动过程：文字是否在 scroll 启动瞬间变黑/变白/半透明？那是 WebKit 渲染管线未同步的典型表现
混合模式本身不耗 CPU，但会触发整块区域的全像素重绘，比纯 transform 慢一个数量级。哪怕只是 top: 1px 动画，也要重合成整个 blend 区域 —— 这个代价容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
