利用CSS设置图片黑白/灰色效果
下面提供两种方法：
1、使用CSS的 filter: gray; 属性即可实现灰度效果。
Chrome内核的浏览器只需要一行属性代码即可：
filter: grayscale(100%);HTML部分代码：
<img src="img/qingxin.png" alt="">
<img class="g" src="img/qingxin.png" alt="">为了形成对比，我把图片引入两次，其中一个添加了一个class g ，用来给它设置样式。
CSS部分代码，为了保证兼容性，可以写成：
img {
width: 300px;
}
.g {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}首先给图片设置一个宽度，再给其中一个设置灰度属性。
效果如下：
利用CSS设置图片黑白/灰色效果 经验总结
给 <body> 标签添加属性，可以实现整站变灰效果。
网上说的其中的 filter: gray; 就是兼容IE的，不过我试着好像不行，可以使用第二种方法。
2、利用 grayscale.js 实现图片的灰度效果。方法很简单：
a. 引入js文件：
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>但是这个链接好像被墙了。。。可以引入我网站的链接：
<script src="http://cdn.w3h5.com/down/source/js/grayscale.js"></script>您可以直接下载 js 文件引入 下载链接：点击下载 grayscale.js
在 script 标签内添加一行：
grayscale(document.getElementById("g"));//通过ID调用或DOM元素集：
grayscale(document.getElementsByTagName("img"));也可以使用JQuery调用：
grayscale($("#g"));需要注意的是：
Grayscale.js 是模仿微软专有的“ 灰度 ”过滤器的实验性尝试（在大多数IE版本中都可用）。在Opera 9，FF2 / 3，Safari 4，IE6 / 7中测试可用。
它可能不适用于Safari 4和Chrome，因为它们不支持 CanvasContext.getImageData（因为图像不能灰度化）。
实现原理：IE浏览器下是添加灰度滤镜，这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法，然后对每个像素点进行灰度转换~~
因此，在现代浏览器下，对于该方法，图片的灰度处理有两个局限性：
1. 速度：300*300这张一般般大小的图片变灰就要数秒之久；
2. 跨域：安全性机制，无法转换跨域的图片为黑白色。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-10)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读