是否可以使用CSS将整个网页转换为灰度？ [英] Is it possible to turn an entire webpage to grayscale using CSS?

问题描述

我想将整个网站变成灰度。当然，我可以手动编辑CSS并调整每个 color ， background-color &公司属性，我可以在Photoshop中调整每个图像。

I would like to turn an entire website to grayscale. Of course, I can manually edit the CSS and adjust every single color, background-color & co. property, and I can adjust every single image in Photoshop.

但是有没有更简单的方法，例如通过使用纯CSS？

But is there an easier way, e.g. by using pure CSS?

例如，将100％x 100％覆盖 div 放在顶部您的网站将每种颜色变成灰度？

E.g., something such as putting a 100% x 100% overlay div on top of your site that turns every color to grayscale?

有任何提示吗？

推荐答案

无需在每个元素上都设置过滤器，您可以在HTML上应用过滤器。

No need to set the filter on every single element, You can apply the filter on HTML.

html {
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}

或正文，如果您希望在html上保留彩色背景。

or body if you wish to keep a colored background on html.

http://codepen.io/anon/pen/VLawaK

这篇关于是否可以使用CSS将整个网页转换为灰度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！