用CSS实现各种图片滤镜效果演示
技术原理
本演示关键使用了几个新型的CSS属性( background-blend-mode , mix-blend-mode , 和 filter )，利用这些属性，我们可以让同一张图片呈现出各种不可思议的神奇效果。
下面大多数的效果图中，背景图片源background-image url通常会反复使用数次，同时利用CSS混合模式 ( multiply , overlay , screen , difference 等)进行处理。
在有一些效果中，使用了一下CSS filter 属性进一步处理图片，比如 grayscale() , brightness() , 和 contrast() 等可以让图片呈现出更好的效果。
制作这个演示时，我们首先让这些图片呈现出原始面貌，然后使用CSS @supports 来检测某种CSS属性是否在你的浏览器中受支持。然后才施加这些效果。
本演示的源代码可以在 GitHub 上下载。
正文到此结束
热门推荐
相关文章
近期评论
-
不会英语啊。
-
前100名用户会展示特殊的纪念徽章
-
-
https://pplx.ai/floraliu4199466 这个链接打不开是什么原因？
-
-
-
-
来看看，最近更新了一波，顺着友联过来的，几年过去了，网站越搞越好，厉害
-
哥太牛了
-
是呀，看您的IP显示在美国，还以为您移民了
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
