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 时边缘常出错
• 性能友好，但不支持 标签，只能用于背景图场景

兼容性兜底：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 值是否一致

双色调不是调色盘操作，是明暗信息的二次分配。混对了层，颜色才不会飘；混错了上下文，再准的色值也救不回来。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS实现双色调图片混合模式特效》文章吧，也可关注golang学习网公众号了解相关技术文章。