转载

用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 上下载。

原文 http://www.webhek.com/image-effects-with-css

正文到此结束

所属分类：编程技术

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。