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对于我测试的图像非常适合。我认为你最好的选择就是使用它，并使用一个元素作为没有应用过滤器的文本。

将整个页面设置为黑白

2 个答案: