将整个页面设置为黑白

Question

我设法通过反转CSS功能实现高对比度，请参阅（https://css-tricks.com/almanac/properties/f/filter/）。

现在，我需要看到整个站点都是黑白的，而不是灰度的。也许这些功能组合在一起可以产生我需要的效果？我已经尝试过对比度（100）灰度（1）; 但会严重影响字母（您无法阅读）。

Answer 1

将此灰度类添加到您的身体：

.grayscale-100 {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}

.colored {
  background: yellow;
  color: blue;
}

<div class="colored">
  This div has a red background and blue font color!
</div>
<div class="grayscale-100">
  <div class="colored">
    This div has the same style as the above, but its parent has the grayscale class!
  </div>
</div>

Answer 2

我认为没有办法做到这一点。在整个图像不变成黑色的情况下，我能达到的最接近的效果是 -webkit-filter: brightness(650%) grayscale(100%);，它仍然相当灰色。我可能错过了一种方法，但我认为灰度工具的目的是使我们通常所说的黑白只有灰色。对于我测试的图像，对比度 100 和灰度 1 效果相当不错。我认为这里最好的选择是使用它并为未应用该过滤器的文本使用元素。