将整页设置为“黑白”

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和Grayscale 1对我测试过的图像非常有效。我认为您在这里的最佳选择是使用它，并为没有应用该过滤器的文本使用一个元素。