先看下css的渲染效果：

左边是原图，右边是通过css渲染实现的老照片效果

html源码：

<div class="pic pic1"><img src="img.jpg"></div>
<div class="pic pic2"><img src="img.jpg"></div>

.pic1是原图，.pic2经过css渲染后的老照片效果

为了方便图片的查看，先把两张图片的样式初始化一下

.pic{
    width: 420px;
    display: inline-block;
    position: relative;
    line-height: 0;
}
.pic img{
    width: 100%;
    height: auto;
}

下面，我们来看下如何通过css把.pic2渲染成老照片的效果。

要实现老照片的效果当然是要改变图片的颜色，可以通过filter:sepia(%)的滤镜效果把图片改为深褐色

深褐色滤镜css：

.pic2{
    filter: sepia(100%);
}

颜色看上去有的老照片的味道，但好像缺点什么？

缺少噪点的效果，放久了的照片除了颜色发黄，还有就是会出现噪点。

要实现噪点效果，我们可以用css做一个有噪点的但透明层，覆盖到照片的上面，来实现噪点效果

噪点效果的css：

.pic2::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(#000a, #000a),
    repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0 / 2500px 2500px,
    repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60% / 2500px 2500px;
    background-blend-mode: normal, difference;
    mix-blend-mode: overlay;
    opacity: .6;
}