哀悼 背景「哀悼纪念时前端常用页面置灰黑白灰换皮肤换背景的效果」

在某些紧急的大事件发生时（重要人物去世，国家哀悼日等等，为了寄托我们的哀思会将页面背景色调为黑白无色彩的效果。这些天上网想必大家也都看到了很多大型的网站或者app或者主流的小程序首页都因为某位伟人的离世而换上了黑白灰色的皮肤，整个氛围就瞬间变得很沉重。

图只是部分示例，那你想知道这种灰色的效果是怎么来的吗。话不多说，直接上干货。

所有的页面都是由一个个页面元素构成的，在代码层面我们称之为标签元素。标签元素里面又分成了 块级标签和行内标签两大类，简单的大白话就是块级标签是独占一行的，比如标题标签，段落标签，列表标签等等很多内容，再此不做太深入的介绍了，另外一类是行内标签 比如 文本标签 强调标签等等 这类标签是支持并排一列显示的。合理的界面标签元素的使用可以提升页面被浏览器引擎的推送机制识别到进而得到更多的曝光度。

最明显的表现是人们可以看到页面元素有了不同的背景色，背景图片，页面元素的排列也更加多元化，小到页面的某个按钮的大小，大到整个程序的水印，背景的调整。这次缅怀伟人置黑白灰无彩色的首页也是一个原理的实际运用。用大白话来说就是给页面顶层元素加了一个灰色的蒙版但保证这层蒙版不影响到用户的其他的操作。具体代码大致如下需要的朋友自己拿去哈。

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

这段代码只有专业的前端工程师才看得懂，比如大斌哈。[给力][耶]

其实样式操作有很多有意思的点感兴趣的朋友自己可以多练练。在此不做太深入的介绍。

一个页面的好坏其实和这个页面的交互效果肯定是分不开的。其实这方面学习难度是整个页面编程当中最核心也是最难的一部分，拿提交表单操作的登陆操作为例子。一个好的登陆流程会提示用户操作的步骤以及过程中对于姓名手机号等一连串的验证，验证成功有成功的提示，失败有失败提示，等待中也有加载中的界面提示，其实这些全是动态脚本在起作用，想了解的朋友可以自己去看看。如何编辑一个页面？在此不做过多介绍了。

最后还是缅怀下伟人，希望我们的哀思他能感受到。所有的页面呈现灰色可能还需要一小段时间。