开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情
最近，我们看到各个网站、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内核的过滤器，这样就能够是适应了。
好了，我们来看一下效果吧：
好了，今天关于实现素装效果，就先聊到这，欢迎大家留言交流。
也欢迎大家关注我的公众号《coder练习生》
