是否可以使用CSS将整个网页变为灰度?

Gol*_*den 13 css colors grayscale

我想把整个网站变成灰度.当然,我可以手动编辑CSS并调整每一个color,background-color&co.属性,我可以在Photoshop中调整每个图像.

但有没有更简单的方法,例如使用纯CSS?

例如,div在您的网站顶部放置100%x 100%叠加层,将每种颜色变为灰度?

任何提示?

Luí*_* A. 25

是的,只需使用滤镜灰度

CSS

*{
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}
Run Code Online (Sandbox Code Playgroud)

注意:您可以在任何元素(html,正文,标题等)中应用它.

在这里演示

  • 嗯,也许我错过了一些东西,但即使在你的演示中,徽标仍然是彩色的,而不是灰度的? (2认同)
  • IMO`html {filter:grayscale(100%)}`应该会更好。 (2认同)
  • @GoloRoden,也许你需要一个前缀 (2认同)
  • @ShrinivasShukla IE版本,请 (2认同)

G-C*_*Cyr 12

无需在每个元素上设置过滤器,您可以在HTML上应用过滤器.

html {
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}
Run Code Online (Sandbox Code Playgroud)

或者如果你想在html上保留彩色背景的身体.

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