使用CSS将图片转换成黑白(灰色、置灰) & 毛玻璃效果

法1⃣️：

 

IE浏览器： filter: gray;

其他浏览器：

.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }

 

法2⃣️： 通过 Greyscale.js

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>grayscale(document.getElementById("thisImage"));或者 grayscale($("#thisImage"));

 

毛玻璃效果：blur

.gray { opacity: 0.7; -webkit-filter: grayscale(100%) blur(5px); /* Chrome, Opera */ -moz-filter: grayscale(100%) blur(5px); -ms-filter: grayscale(100%) blur(5px); filter: grayscale(100%) blur(5px);}

 

转载于:https://www.cnblogs.com/catherLee/p/11435013.html

相关资源：图像特效处理