sepia(0.6)~sepia(0.8)更自然,因sepia(1)会丢失细节、暗部糊成一片;需搭配contrast(1.15)、brightness(0.92)、hue-rotate(-8deg)及radial-gradient暗角才显真实怀旧感。

直接用 filter: sepia() 就能加褐色滤镜,但值设成 100% 容易发黑发闷,实际推荐 sepia(0.6)~sepia(0.8) 起手,再微调其他参数。
为什么 sepia(1) 不好用
sepia(1) 或 sepia(100%) 会把所有颜色强行压进棕褐单色通道,丢失细节、暗部糊成一片。尤其在浅色背景或高光丰富的图上,看起来像蒙了一层旧胶片残渣。
- 现代浏览器(Chrome 120+、Firefox 125+、Safari 17+)都支持小数,
sepia(0.7)比sepia(1)更自然 - iOS Safari 15.4 之前版本不支持
sepia()在<img>上单独生效,得套一层<div> 并加 <code>will-change: filter - 如果图片本身偏黄/橙,
sepia(0.5)可能就足够;冷色调图建议从sepia(0.75)开始试 -
contrast(1.15):补足褪色导致的灰平感,但别超1.3,否则暗部断层 -
brightness(0.92):模拟胶卷轻微欠曝,低于0.85会发雾,高于0.98就失去陈旧味 -
hue-rotate(-8deg):把棕褐往暖黄偏一点,避免偏绿(正数)或偏紫(负太多),-5deg 到 -12deg 是安全区间 - 给图片外层包一个
<div class="vintage-img"><img></div> - 在
.vintage-img上设:background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.15) 100%); - 再加
clip-path: inset(0);确保遮罩贴合图像尺寸 - 注意:这个渐变要和
filter同时生效,不能只加在<img>上,否则会被滤镜影响变色
sepia() 必须搭配的三个参数
纯 sepia() 是“褐色”,不是“老照片”。真正怀旧感来自对比、明暗和色相的协同压制。
组合写法示例:filter: sepia(0.75) contrast(1.2) brightness(0.92) hue-rotate(-8deg);
暗角(vignette)才是点睛之笔
老照片边缘必然有渐晕,靠 box-shadow 或模糊边框是假的。真实做法是用 radial-gradient 遮罩 + clip-path。
滤镜顺序不可逆,sepia() 放最前;暗角必须用容器层实现,不能靠伪元素盖在滤镜上——否则 hue-rotate 会把遮罩层也转色。这些细节一错,怀旧就变成“脏”。











