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

weixin_30673715

于 2019-08-30 15:41:00 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/catherLee/p/11435013.html

版权

法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