推荐使用 sepia(0.6) contrast(1.1) brightness(0.95) 组合实现自然老照片效果，避免 sepia(1) 过重发黑；透明 png 需配合泛黄背景（如 #f8f2e9）防止层次丢失；高保真褪色需 canvas 或 svg 方案，但性能开销大。
直接用 filter: sepia() 就能生效，但值设成 1 通常太重
浏览器原生支持 sepia()，不需要 JS 或 SVG 就能加褐色调。但很多人一上来就写 sepia(1)，结果图发黑、细节糊掉，像蒙了层旧布。实际推荐从 sepia(0.6) 或 sepia(60%) 起手——这个强度保留纹理，又带出老照片的暖棕感。数值范围是 0–1（或 0%–100%），不填默认为 0，即无效果。
sepia() 单独用容易“闷”，必须搭配 contrast 和 brightness
纯 sepia() 会让图像对比度塌陷、明暗趋同，看着像洗褪色的老胶片。补救方法很固定：
-
contrast(1.1)：小幅提升对比，让暗部更沉、亮部更透 -
brightness(0.95)：轻微压暗整体，避免泛灰，增强怀旧氛围 - 可选加
hue-rotate(-5deg)：让棕黄偏暖一点（Chrome/Firefox 支持，Safari 有些版本会忽略）
组合写法示例：filter: sepia(0.6) contrast(1.1) brightness(0.95);
透明 PNG 的褐色效果会被白色背景吃掉，得先垫个泛黄底色
sepia() 作用于整个元素（包括 alpha 通道），如果图是 PNG 且有透明区域，而父容器背景是纯白，那透明部分会变成浅棕+白底混合，削弱层次感。解决办法不是改图，而是改背景：
- 给图片容器加
background: #f8f2e9（一种纸张泛黄色） - 或者用伪元素铺底：
::before { background: #f5f0e6; content: ""; position: absolute; } - 别依赖
img自身的background，它对透明像素无效
需要真实褪色/划痕/泛黄纸基？sepia() 不够用，得切 Canvas 或 SVG
sepia() 只做单通道线性映射，没法模拟银盐相纸的颗粒、边缘泛黄、局部褪色或划痕噪点。真要逼近扫描老照片质感：
- Canvas 方案：用
getImageData()逐像素计算棕褐矩阵，再叠加noise或perlin噪点 - SVG 方案：用
feColorMatrix定义自定义棕褐系数，配合feTurbulence模拟纸纹 - 注意：这两种方案在低端安卓机或 iOS Safari 上帧率明显下降，慎用于滚动列表里的图
日常运营图、头图、卡片图，sepia(0.6) + contrast(1.1) + brightness(0.95) 已足够；真要复刻暗房效果，得接受性能代价和兼容性妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
