将整个页面设置为黑白

Question

将整个页面设置为黑白

htmlcsscolorscss-filters

9

我已经成功使用反转CSS功能实现了高对比度，详见 (https://css-tricks.com/almanac/properties/f/filter/)。

现在我需要看到整个网站呈现出黑白效果，而不是灰度。也许可以通过这些功能的组合来达到我需要的效果？我已经尝试过contrast(100) grayscale(1);但是它会影响字母的可读性（您无法阅读它们）。

- Chuck Norris

2个回答

1

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

- Zygomorph

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Laura San Martin · Accepted Answer

将此灰度类添加到您的body中：

.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>