国家一些重要的公祭日，通常很多网站的色系都会整体变成灰色调，那是怎么实现的？其实很简单，在body上整体加一段样式即可。

完整css代码如下

  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1)

filter介绍

CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。
主要效果介绍：

1. blur(px) 模糊，默认0px，值越大越模糊
2. brightness(%) 更亮或更暗，如果值是0%(全黑),值是100%(无变化),>100%(更亮)
3. contrast(%) 对比度，值是0%(全黑),值是100%(无不变),>100%(更低的对比)
4. grayscale(%) 灰度，值为100%(转为灰度图像)，值为0%(无变化)，值在0%到100%之间
5. opacity(%) 透明度，值为0%(完全透明)，值为100%(无变化),与opacity属性类似
6. sepia(%) 褐色，取值0%-100%
7. invert(%) 反转颜色，取值0%-100%
8. drop-shadow(h-shadow v-shadow blur spread color) 设置阴影，该函数与box-shadow属性很相似，不同之处在于，通过滤镜一些浏览器为了更好的性能会提供硬件加速

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/8519