sepia(0.6)～sepia(0.75)最稳妥：0.6保留冷调底色，适合现代感怀旧；0.75棕黄更明显但需同步提升contrast(1.1)防灰平、brightness(0.95)压暗5%模拟老照片曝光特性。
sepia() 是最直接、开箱即用的老照片色调方案，但单独用 sepia(1) 容易发闷、失细节，必须配合 contrast、brightness 等微调才自然。
sepia() 参数怎么选才不假？
数值不是越接近 1 越“老”，而是越容易偏棕红、丢层次。实测中 sepia(0.6)～sepia(0.75) 最稳妥：
-
sepia(0.6)：保留一定冷调底色，适合现代感稍强的怀旧场景 -
sepia(0.75)：棕黄更明显，接近冲洗胶片的暖棕，但需同步提升对比度防灰平 - 避免
sepia(1)单独使用——它会抹掉所有色相差异，图像变“糊”
为什么加 contrast(1.1) 和 brightness(0.95)？
老照片不是简单变棕，而是有明暗压缩、边缘微褪、颗粒感带来的“视觉噪点”。contrast 和 brightness 是低成本模拟关键：
-
contrast(1.1)拉开灰阶，让暗部更沉、亮部更透，避免 sepia 后整体发灰 -
brightness(0.95)整体压暗约 5%，符合老照片曝光偏保守的物理特性 - 顺序很重要：建议写成
filter: sepia(0.7) contrast(1.1) brightness(0.95)，浏览器按从左到右顺序叠加，先上色再调层次
用伪元素叠加颜色层比 filter 更可控吗？
可以，但代价是结构变重、维护成本上升，且无法响应图片原始 alpha 或透明区域。典型做法是：
- 给容器设
position: relative，图片设position: absolute - 用
::before叠一层background: rgba(128, 80, 40, 0.25)（棕褐半透色） - 再加
mix-blend-mode: multiply强化底层纹理，但注意：该模式在部分背景色下会反常（比如纯白底上几乎无效） - 兼容性差于
filter：IE 全挂，旧版 Safari 对mix-blend-mode支持不稳定
性能与兼容性必须盯住的两个点
filter 在多数现代浏览器中硬件加速良好，但有两个真实坑位：
- 移动端 Safari 对链式 filter（如同时用
sepia+blur+contrast）偶发渲染卡顿，建议去掉blur或降为blur(0.3px) -
filter不触发重排，但会强制重绘；若对大量图片批量加滤镜（比如瀑布流），建议用will-change: filter提前提示渲染引擎，但别滥用——它本身有内存开销
真正难的不是写出那几行 CSS，而是判断这张图适不适合用 sepia：高饱和人像、带文字的 Banner、浅色背景上的图标，都可能因棕褐覆盖而降低可读性。动手前先看原图的明度分布和主色调，比套参数重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
