如何用css实现老照片的效果
先看下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; }
用户登录
还没有账号?
立即注册