CSS实现带噪点的老照片效果实例页面

效果：

原图如下：

代码：

CSS代码：

figure {
    display: inline-flex;
    position: relative;    
    filter: sepia(100%);
}
figure::before {
    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;
}

HTML代码：

<figure>
    <img src="mm9.jpg" />
</figure>