我已经成功使用反转CSS功能实现了高对比度,详见 (https://css-tricks.com/almanac/properties/f/filter/)。
现在我需要看到整个网站呈现出黑白效果,而不是灰度。也许可以通过这些功能的组合来达到我需要的效果?我已经尝试过contrast(100) grayscale(1);但是它会影响字母的可读性(您无法阅读它们)。
我已经成功使用反转CSS功能实现了高对比度,详见 (https://css-tricks.com/almanac/properties/f/filter/)。
现在我需要看到整个网站呈现出黑白效果,而不是灰度。也许可以通过这些功能的组合来达到我需要的效果?我已经尝试过contrast(100) grayscale(1);但是它会影响字母的可读性(您无法阅读它们)。
将此灰度类添加到您的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>
-webkit-filter: brightness(650%) grayscale(100%);
,但仍然相当灰暗。可能我错过了某种方法,但我认为灰度工具旨在使我们通常所说的黑白色调变为灰色。对于我测试的图像,对比度为100,灰度为1的效果还不错。我认为你最好的选择是使用这个,并使用一个没有应用该滤镜的文本元素。
<html style='filter: grayscale(100%);'>
来实现。 - gvlasov