如何将网站全部变成灰色的素装效果，瞧过来

news2024/9/20 20:48:44

最近，我们看到各个网站、app的页面全部变成了灰色或者黑白色。对于我们需要悼念的日子，使用这种素装，以表示我们对逝者或者英雄的悼念与缅怀！

我们看到这种全站的内容全部为灰色，是不是很好奇呢？图片、按钮、文字全部是灰色的，怎么实现呢？

我想在我们头脑中想到的第一个肯定是将我们的所有CSS样式增加灰色控制，全部通过换样式来解决。

这种方案是能够实现的，不过你不要忘记了，如果是一个页面你能够很轻松的换掉，诸如京东、淘宝、腾讯这种大的电商、门户网站如果按照这种思路，是不是会增加很多的人工成本呢？

这里，告诉大家一个超级简单的方案，只需要几行代码就能够搞定。这里只说一种，起始达到素装的目的，不止这一种。

源码如下：

<!DOCTYPE html>
<style type="text/css">
  html {
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter:grayscale(1)
  }
</style>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你想要的网站灰色解决方案实现</title>
  </head>
  <body style="margin: 0px;padding: 0px;box-sizing: border-box;">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

从上图我们可以看到，H5页面主要分为两部分，上面的style和西方的html

上方的style定义了filter，其中filter:gray就是为页面增加了一个灰度的滤镜，这样我们html里面的全部内容就会变成和白色的了。

这个滤镜在safari和chrome中是有兼容性问题，所以下面定义了webkit内核的过滤器，这样就能够是适应了。

好了，我们来看一下效果吧：