css filter滤镜给网站设置黑白背景

国家公祭日，各种官网和各大电商，都把网站设置为灰色系列，以此来悼念历史，缅怀先烈。

本文主要使用CSS3的filter滤镜属性让个人网站一秒变成灰色系列的具体用法。

filter(滤镜) 属性

定义： filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

grayscale(%)值： 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

灰色系列实现

给html元素设置filter属性

html {
   -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

提示：  可能有会给body元素添加filter属性，确实也可以做到同样的效果，但是如果页面中有fixed固定定位的元素或内容，会出现定位失效的问题，因此建议直接给html元素加filter属性。

vue中使用的话就直接加在app上（最好放在网站全局头部）：

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
</style>

原文链接