如何将浏览器中的网页变成黑白色（灰度）？

Question

如何在我的网络浏览器上将网页的所有颜色都变成简单的黑白色？

哪些浏览器支持此功能（Chrome、Internet Explorer 还是 Firefox）？

这可能吗？

Answer 1

快进几年，这可以在 CSS 中很好地完成。

body {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

如果你需要一个可以在任何网站上重复使用的快捷方式，最简单的方法可能是书签小工具，可将其用作书签，就像 URL 一样。代码如下：

(function () {
  var body = document.body;
  body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
  if (!body.style['filter']) {
    body.style['-webkit-filter'] = 'grayscale(1)';
    body.style['filter'] = 'grayscale(1)';
  }
}());

书签片段如下：

javascript:(function(){var e=document.body;e.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",e.style.filter||(e.style["-webkit-filter"]="grayscale(1)",e.style.filter="grayscale(1)")}())

Answer 2

我发现这篇很好的博客文章，它解释了如何在 IE 和其他浏览器中执行此操作：

“非 IE 浏览器中的“灰度”“（詹姆斯·帕多尔西）

IE 的基本知识如下：

elem {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /* Element must "hasLayout"! */
  zoom: 1;
}

您需要创建一个自定义 CSS 文件并在浏览器中使用它来应用于所有页面（查看 IE 的辅助功能选项）。

对于其他浏览器，它需要更多工作，包括添加 JavaScript 来循环遍历元素并转换为灰度。因此它不会是“点击黑白”，但可能会让您朝着正确的方向前进。

该博客有一个演示页面您可以从那里下载 JS 脚本。

Answer 3

我也正在寻找相同的内容，并且找到了几个选项：

• 灰度工具做你想做的事

  缺点是你需要在每个页面上激活它，快捷键是Shift+ g，如果你在文本字段中，它不起作用。而且每次你​​点击某个东西，你都会再次获得颜色。

• 页面过滤效果可以完成这些任务，甚至更多，并且有一个可以点击的按钮。需要在每个页面上激活。

• 光泽提供一个滑块，允许在彩色和灰度之间连续切换。需要每页激活一次。