sepia() 滤镜不是纯褐色，因其按标准算法将RGB转单色再叠褐色调，保留明暗但压缩色相，导致偏灰发闷；需配合brightness()、contrast()及噪点蒙版等才能模拟真实胶片效果。
sepia() 滤镜为什么不是纯褐色？
直接写 filter: sepia(1) 确实会变褐，但结果偏灰、发闷，常被误以为“没生效”或“颜色不对”。这是因为 sepia() 是按标准算法把 RGB 转成单色色调再叠加褐色调，不是简单上色——它保留原始明暗关系，但压缩了色相范围，导致高光发白、阴影糊成一片。
常见错误现象：img 加了 sepia(1) 后看起来像老照片，但文字或 UI 元素一加就显得脏、对比度崩坏；用在浅底深字上甚至让文字变模糊。
- 想控制“褐化程度”，别只调
sepia()的参数（0–1），要配合brightness()和contrast() - 对文字或 SVG 图标这类矢量内容，
sepia()效果往往比位图更生硬，建议优先用color+background-color手动配色 -
sepia(1)在 Safari 15.4 之前有渲染抖动问题，动画中慎用
怎么让 sepia 更像老胶片而不是旧打印机？
纯 sepia() 缺乏颗粒感、泛黄不均、边缘暗角这些真实复古特征。靠单个滤镜做不到，得叠加工具链。
使用场景：产品页做“怀旧模式”切换、相册预览、游戏 UI 主题切换。
立即学习“前端免费学习笔记（深入）”；
- 先用
sepia(0.8)定主调，避免过饱和发红 - 叠加
contrast(1.2)拉开明暗，模拟胶片反差 - 加
brightness(0.95)微压整体亮度，防止高光漂白 - 如果容器支持伪元素，可用
::before叠一层带噪点的rgba(255, 220, 180, 0.08)蒙版模拟泛黄
示例：
div.vintage { filter: sepia(0.8) contrast(1.2) brightness(0.95); }
filter: sepia 在哪些元素上会失效或异常？
sepia() 是作用于渲染层的后处理，不是 CSS 颜色计算，所以对某些内容天然“看不见”。
常见错误现象：给 button 加 sepia，按钮边框和文字颜色不变；SVG 内联图标颜色没反应；Canvas 绘制内容完全不受影响。
-
sepia()不改变元素的color、border-color、background-color这些属性值，只影响最终像素输出 - SVG 使用
fill或stroke时，若设为当前色（currentColor），且父级没设颜色，sepia对它无效 - Canvas 2D 上绘制的内容需手动用
ctx.filter = 'sepia(1)'（仅 Chrome/Firefox 支持，Safari 不支持） - 视频元素（
video）支持sepia，但 iOS Safari 16.4 之前存在绿屏闪烁 bug
替代方案：不用 filter 也能做复古色？
当兼容性或控制精度要求高时，filter: sepia() 反而是最糙的选择。
性能影响：滤镜会触发 GPU 渲染层合成，频繁动画中可能掉帧；而纯 CSS 颜色变更只走样式计算，更轻量。
- 对文字/图标，用
color: #7a5c42+background-color: #f8f2e9手动搭一套暖棕配色，更可控 - 对图片，导出时就在 Photoshop/Lightroom 里加褐色调+颗粒，比运行时滤镜快且一致
- 需要动态切换？用 CSS 自定义属性 +
var(--vintage-text, #7a5c42)，比 JS 切换filter更稳定
复杂点在于：复古不是一种颜色，是明度分布、色相偏移、纹理干扰的组合。滤镜只是其中最表层的一环，真要还原质感，得从素材源头和设计系统一起动。
