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

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

如果您需要一个可在任何网站上使用的可重用快捷方式，最简单的方法可能是bookmarklet，它可以像 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 和其他浏览器中执行此操作：

\n\n

“非 IE 浏览器中的 \xe2\x80\x9cGrayscaling\xe2\x80\x9d ” (James Padolsey)

\n\n

IE 的基础知识具体如下：

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n