最快的老照片效果是filter: sepia()，推荐组合为sepia(0.8) contrast(0.85) brightness(0.92) blur(0.3px) drop-shadow(0 0 8px rgba(140,100,60,0.15))，并可叠加噪点纹理提升真实感。
用 filter: sepia() 实现基础老照片色感
纯 CSS 最快的老照片效果就是 sepia()，它把图像转成棕褐色调，接近传统银盐相纸的暖黄质感。但注意：它只是单通道色调偏移，不是真正模拟褪色、划痕或泛黄纸基。
实操建议：
-
sepia(1)是完全棕褐；sepia(0.5)是半强度，更自然；设为0则无效果 - 单独用
sepia()容易显得“假”，建议搭配contrast(0.9)和brightness(0.95)稍微压暗提柔 - 对 PNG 透明区域也生效，若背景是白色，可能削弱层次——可先用
background: #f8f2e9模拟泛黄纸底
叠加 filter 多函数做复合老化效果
真实老照片不只有颜色变化，还有轻微模糊、颗粒感、边缘暗角。CSS 的 filter 支持链式写法，顺序影响最终结果（例如 blur() 在前会模糊后续效果）。
推荐组合（直接可用）：
立即学习“前端免费学习笔记（深入）”；
filter: sepia(0.8) contrast(0.85) brightness(0.92) blur(0.3px) drop-shadow(0 0 8px rgba(140, 100, 60, 0.15));
说明：
-
blur(0.3px)模拟轻微失焦，别超0.5px，否则像糊掉 -
drop-shadow()用暖棕（如rgba(140, 100, 60, 0.15)）模拟暗角，比box-shadow更贴合图像边缘 - 所有值都偏保守，因为过度滤镜在高 PPI 屏上会暴露锯齿或色带
用 background-image 叠加噪点纹理提升真实感
CSS filter 无法生成胶片颗粒，但可以用半透明 PNG 纹理图层覆盖。这是最轻量、兼容性最好、且可控的“加噪”方式。
操作要点：
- 准备一张 200×200 像素的灰度噪点图（导出为 2KB 以内 PNG），用
url("noise.png") - 设置：
background-image: url("noise.png"), inherit;+background-blend-mode: overlay; - 关键：给该元素设
background-size: 150%;并background-position: center;，避免重复纹理感太强 - 若用
background-blend-mode: multiply;，需调亮主图，否则整体发黑
IE/旧 Edge 不支持 filter？降级方案要留一手
IE11 及更早版本完全不支持 filter（包括 sepia()），而旧 Edge（≤17）只支持 filter: url(#svg-filter) 这种 SVG 引用写法。
稳妥做法：
- 用
@supports (filter: sepia())包裹现代滤镜样式，确保仅在支持环境生效 - 降级时，至少保留
background-color: #f8f2e9+opacity: 0.98，视觉上仍有“陈旧感” - 真要兼容 IE，可内联一个极简 SVG 滤镜（仅含
实际项目中，优先保证 Chrome/Firefox/Safari/Edge 80+ 效果准确，IE 用户看到的是“干净但没老化”的图——这比错位、卡顿或白屏更可接受。
