sepia()滤镜仅实现棕褐色调，无法解决发灰、褪色等问题，需配合contrast()等函数调整层次感；单独使用仅适用于高对比原图，对手机直出图基本无效。
sepia() 滤镜不是“一键怀旧”，它只负责棕褐色调，不解决发灰或褪色感
很多人加了 filter: sepia(1) 就以为完成了怀旧效果，结果页面看起来像老照片被水泡过——颜色是棕的，但太淡、没层次、缺乏颗粒感。因为 sepia() 本身只是把 RGB 转换为固定棕褐映射，不调整对比度、亮度或饱和度，原始图越平，结果越闷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单独用
sepia(1)仅适用于高对比、中等饱和度的原图；对手机直出或网页截图，基本无效 - 必须配合
contrast()提升明暗分离，常见有效区间是contrast(1.2)到contrast(1.6) - 避免
sepia(1) contrast(2)这类极端组合，容易让暗部死黑、亮部溢出，细节全丢 - 如果原图偏冷（如蓝调截图），先加一点
hue-rotate(-10deg)再套 sepia，棕调会更自然
contrast() 的数值不是线性增益，1.3 和 1.4 可能导致明显观感断层
CSS 的 contrast() 是非线性变换，尤其在 1.2–1.5 区间，人眼对明暗拉伸极其敏感。一个像素的灰度值从 120 拉到 140，可能让整块阴影突然“浮起来”，破坏旧照片的沉静感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先试
contrast(1.3)起步，用浏览器 devtools 实时拖动调节，观察文字边缘和渐变过渡是否生硬 - 避免和
brightness()叠加使用——两者作用域重叠，容易造成局部过曝或发灰 - 在 Retina 屏上，
contrast(1.3)看着刚好，但普通屏可能显暗，需搭配media查询做微调 - 如果容器内有 SVG 或文字，注意
contrast()会影响描边粗细的视觉权重，小字号文字可能变虚
滤镜顺序影响最终颜色表现，sepia 必须放在 contrast 之前
写成 filter: contrast(1.4) sepia(1) 和 filter: sepia(1) contrast(1.4) 渲染结果不同：前者先拉对比再上棕调，暗部更易发黑；后者先转色再拉伸，棕调更均匀、保留更多中间灰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 严格按
sepia()→contrast()→ 其他（如blur()）顺序书写，这是最符合胶片褪色逻辑的流程 - 不要混用
saturate()和sepia()：sepia 本身已降低饱和度，再加saturate(0.8)会让棕变脏 - 若需轻微泛黄，用
hue-rotate(5deg)替代sepia(0.8)，控制更精细 - 动画滤镜时，顺序错乱会导致闪烁，务必固定 filter 函数顺序，只改参数值
IE 和旧版 Safari 不支持 filter，但 fallback 方案不能只靠 background-image
filter 在 IE 完全不可用，iOS 9.3 以下 Safari 也只支持单个滤镜。直接写 filter: sepia(1) contrast(1.3) 会导致这些环境完全失效，且无降级提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (filter: sepia(1))包裹滤镜样式，里面写现代方案；外面写纯色背景或预处理的 PNG 替代图 - 不要依赖 JS 检测后动态加 class——首屏渲染会闪白或错位
- 若用 WebP/JPEG 图片，可服务端生成一份带 sepia+contrast 的版本作
picturefallback，比 CSS 滤镜更稳 - 注意：伪元素
::before上加 filter 后，z-index 层叠可能异常，旧 Safari 中常被主内容遮盖
真正难的不是调出棕褐色，而是让不同来源的图（截图、PNG、用户上传）在各种设备上都保持“旧但不脏、暖但不腻”的分寸感。参数多调 0.1，可能就从怀旧变成故障风。
