使用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);
}