双色调纯CSS实现核心是mix-blend-mode混合而非调色，需用伪元素叠加单色层并设multiply/screen模式，background-blend-mode适用于背景图，兼容性需降级为filter微调，真机调试须注意系统色彩管理干扰。
用 mix-blend-mode 叠加纯色层实现双色调
纯 CSS 做双色调，核心不是调色而是“混合”——把一张图和两个单色层按特定规则叠在一起。mix-blend-mode 是唯一能直接复用原图明暗信息的属性，比 filter: grayscale() + sepia() 之类粗暴转换靠谱得多。
常见错误是直接给 <img alt="CSS如何对图片应用不同混合模式做双色调特效" > 加 mix-blend-mode，结果啥也没变：因为混合模式只对重叠元素生效，必须用伪元素或额外 <div> 盖在图片上。
<ul>
<li>推荐结构：用 <code><figure></figure> 包裹 <img alt="CSS如何对图片应用不同混合模式做双色调特效" >，再用 ::before 和 ::after 分别代表高光色和阴影色层
position: absolute，宽高拉满，z-index 高于图片multiply（阴影）和 screen（高光）最稳，overlay 容易过曝rgba() 控制透明度，比如 rgba(255, 0, 100, 0.6)，不透明会吃掉细节
background-blend-mode 替代方案：用渐变当“调色底板”
如果图片是固定背景（比如 background-image），background-blend-mode 更轻量，不用额外 DOM 元素。
典型翻车点：写成 background: url(img.jpg), linear-gradient(...) 却没指定混合模式——默认是 normal，等于白忙活。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
background-blend-mode: multiply, screen，顺序要和图层顺序一致 - 渐变方向影响色调分布：
linear-gradient(to bottom, #ff0066, #00a8ff)会让顶部偏红、底部偏蓝 - 慎用
hard-light：在 Safari 里渲染不稳定，尤其搭配background-size: cover时边缘常出错 - 性能友好，但不支持
<img alt="CSS如何对图片应用不同混合模式做双色调特效" >标签，只能用于背景图场景
兼容性兜底：IE/旧 Edge 下降级为单色滤镜
双色调本质是视觉增强，不是功能刚需。所有现代浏览器都支持 mix-blend-mode，唯独 IE 完全不认，旧 Edge（≤17）部分支持但有闪烁 bug。
别写 @supports (mix-blend-mode: multiply) 这种检测——它在旧 Edge 里会误判为支持，结果页面花屏。
- 稳妥做法：默认用
filter: contrast(1.2) saturate(1.4)微调，再用@supports not (mix-blend-mode: multiply)隔离老浏览器 - 降级色值选中性灰：
filter: brightness(0.9) sepia(0.3)，比强行套双色更自然 - 注意
mix-blend-mode和filter同时存在时，filter 会先算，可能削弱混合效果
移动端真机调试最容易漏的坑
Chrome 模拟器里看着完美，一上真机就发灰或偏色，大概率是系统级色彩管理在捣鬼。
iOS Safari 默认开启“自动白平衡”，会悄悄调整 CSS 渲染的色相；安卓某些厂商 UI（如小米 MIUI）把 mix-blend-mode 当“耗电特效”强制降级。
- 加
color-scheme: light到根元素，防止深色模式干扰混合计算 - 避免用
hsl()写颜色，改用rgb()或十六进制，hsl 在 iOS 上解析偏差明显 - 真机测试必查：截图后用取色器点图中同一位置，对比模拟器和手机 RGB 值是否一致
双色调不是调色盘操作，是明暗信息的二次分配。混对了层，颜色才不会飘；混错了上下文，再准的色值也救不回来。
