sepia() 仅实现棕褐色相偏移，需配合 contrast(0.7–0.9) 和可选 hue-rotate(5deg) 才能模拟老照片的泛黄、褪色与层次感，且滤镜顺序、图片格式及 css 变量调控均影响最终效果。
sepia() 滤镜本身不等于“老照片”，它只是棕褐色调的起点
很多人以为 sepia(1) 一加就出复古感，实际它只做色相偏移，不控制明暗对比和褪色感。纯用 sepia(1) 的图常显得闷、平、发灰，缺乏老照片那种“泛黄+细节弱化+边缘微晕”的层次。
真正接近胶片老照片效果，必须叠加 contrast() 降低对比度（模拟褪色），有时还要配合 brightness() 或 hue-rotate() 微调黄调倾向。
-
sepia(1)是最大棕化，但数值在0.6–0.8反而更自然，避免过度棕红 -
contrast()建议设为0.7–0.9：低于0.7容易糊成一片，高于0.9就变回现代高清感 - 别用
contrast(0)或负值——会导致图像完全失真，不是“褪色”而是“崩溃”
组合滤镜顺序影响最终颜色表现
CSS 滤镜是按书写顺序从左到右依次应用的，sepia() 在前还是 contrast() 在前，结果肉眼可辨。尤其当 contrast 值偏低时，先 sepia 再 contrast 会让棕黄更柔和；反过来先 contrast 后 sepia，容易让暗部发黑、亮部漂白。
实测推荐写法：filter: sepia(0.7) contrast(0.8);
- 错误写法：
filter: contrast(0.8) sepia(0.7);—— 暗部细节丢失更快，黄调发脏 - 如果还想加点泛黄感，可在后面追加
hue-rotate(5deg)，但别超过10deg，否则偏绿 - 所有滤镜值都支持小数，别写成整数（如
sepia(1)不如sepia(0.75)精细）
浏览器兼容性与图片格式的隐性冲突
filter 属性在现代浏览器中基本无压力，但老照片效果在不同图片格式上表现不一。PNG 透明区域会被 sepia() 错误染色（尤其 alpha 较低的边缘），JPG 则更稳定。更隐蔽的问题是：Safari 对 sepia() + contrast() 组合的渲染略偏冷，可能少一点黄调。
- 测试时优先用 JPG 原图，避免 PNG 半透明干扰判断
- Safari 用户若发现不够黄，可微增
hue-rotate(3deg)补偿，Chrome/Firefox 通常不需要 - 不要对 SVG 元素直接套这套组合——SVG 渲染路径和位图不同，
sepia()行为不可控
用 CSS 变量动态调节老照片浓度，避免硬编码
把滤镜值写死在样式里，后期想微调就得改多处。用 CSS 自定义属性能统一控制，也方便做“原图/老照片”切换动画。
例如：
img.old-photo {
--sepia: 0.7;
--contrast: 0.8;
filter: sepia(var(--sepia)) contrast(var(--contrast));
}
- JS 动态改值：
img.style.setProperty('--sepia', '0.6');，比重写整个filter字符串安全 - 做 hover 过渡时，只对
--sepia和--contrast加transition，别直接 transitionfilter——性能差且 Safari 有闪烁 - 注意：CSS 变量不能直接用于
@keyframes中的filter，得靠 JS 驱动或用animation控制变量本身
sepia(0.72) 配 contrast(0.78) 和 sepia(0.73) 配 contrast(0.78)，人眼就能分辨出哪个更像抽屉底压了二十年的相纸。这种精度没法靠文档查出来，只能调，一张图一张图地看。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
