真正可控的复古滤镜需按 sepia()→contrast()→saturate() 顺序组合，参数分别控制在 0.65–0.7、1.15–1.25、0.7–0.95 区间，且须规避 PNG/SVG 渲染差异与浏览器兼容性问题。
直接用 sepia(1) 加 saturate(1) 不会得到复古感，反而容易让图片发闷、偏灰或泛紫；真正可控的复古滤镜必须控制棕化强度、饱和度衰减节奏和明暗层次，且 saturate() 在 sepia() 后使用极易失控。
为什么 sepia() + saturate() 组合常出问题
sepia() 本质是固定矩阵的色域压缩操作，不是“加一层棕黄”，它会大幅削弱原图的色相自由度；而 saturate() 是对当前已压缩图像做全局饱和度拉伸——结果就是：低饱和区域被强行提亮但无细节，高光发白，暗部糊成一片。更隐蔽的问题是，saturate(1.5) 这类值在 Safari 15.4 之前会被四舍五入为 saturate(1)，导致跨浏览器效果断裂。
-
sepia(1) saturate(1.2)看似合理，实测中棕调常带脏绿边（尤其在肤色/天空区域） - 原图若本身饱和度低（如手机直出图），
saturate()无法“凭空造色”，只会放大噪点 -
saturate()对灰阶影响远大于对色相影响，文字边缘、图标描边易变虚
正确组合 sepia 和 saturate 的参数区间与顺序
必须把 sepia() 放前面，saturate() 放后面，且 saturate() 值严格控制在 0.7–0.95 之间——这是模拟胶片褪色后“颜色没那么鲜，但也没完全死”的关键。数值超过 1 就违背复古逻辑，低于 0.6 又容易显灰。
- 推荐写法：
filter: sepia(0.65) saturate(0.85); - 避免写成：
filter: saturate(0.85) sepia(0.65);（先降饱和再上棕，棕调不透、暗部发闷） -
sepia(0.65)比1更安全：保留部分原图冷暖倾向，避免棕红过重 -
saturate(0.85)不是“降低饱和”，而是抑制 sepia 带来的灰蒙感，让中间调有呼吸感
什么时候该放弃 saturate()，改用 contrast() 或 brightness()
当图片出现大面积发灰、文字边缘模糊、或对比度崩坏时，saturate() 已不是解药——它不解决明暗分离问题。contrast() 才是修复层次的核心，尤其对现代高清图转复古风格。
- 典型症状：
sepia(0.7) saturate(0.8)后，阴影糊成一块、高光漂白 → 加contrast(1.25) - 推荐组合：
filter: sepia(0.7) contrast(1.25) saturate(0.82); - 别碰
brightness()和saturate()同时用：两者作用域高度重叠，极易局部过曝 - 如果容器里有 SVG 图标或小字号文字，
contrast(1.25)可能让描边视觉变粗，此时应降为1.15并配合filter: drop-shadow(0 0 1px rgba(0,0,0,0.1))补边缘
兼容性与格式陷阱：JPG、PNG、SVG 的表现差异
sepia() 和 saturate() 在不同格式上行为不一致，这不是 bug，是渲染管线差异。PNG 的 alpha 通道会让 sepia() 在半透明边缘错误染色，而 SVG 元素压根不按位图逻辑走。
- 测试阶段务必用 JPG 原图，避免 PNG 半透明干扰判断
- 对 PNG 图，优先用
background-image替代 - 绝对不要对 SVG 元素直接写
filter: sepia(0.7) saturate(0.8)——Safari 渲染不可控，Chrome 可能忽略saturate() - IE 完全不支持
filter，fallback 方案得用background-image+ class 切换，不能只靠@supports
真正难的不是调出一个“像老照片”的瞬间效果，而是让同一组参数在 Retina 屏、普通屏、Safari 和 Chrome 下都保持棕调不偏、层次不糊、文字不虚——这需要把 sepia() 当底色、contrast() 当骨架、saturate() 当薄釉，少一步，就不是复古，是故障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
