使用滤镜实现页面整体灰度效果

通过 CSS 的 filter 属性可为整个页面应用灰度滤镜将页面呈现黑白效果在需要营造特殊氛围或灰度化处理时可以直接在 html 标签上使用 filter 实现全局的视觉调整例如在纪念日或特殊活动中快速切换页面样式形成统一的黑白主题

在实战中可直接在 html 元素上添加 filter 属性将 grayscale 值设置为所需的比例即可也可通过兼容性前缀实现更广泛的浏览器支持以下代码为页面应用约 95%的灰度效果

filter - CSS（层叠样式表） | MDN

html {
  filter: grayscale(95%);
  -webkit-filter: grayscale(95%);
  -moz-filter: grayscale(95%);
  -ms-filter: grayscale(95%);
  -o-filter: grayscale(95%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.95);
}

在真实项目中可根据实际需求动态调整灰度比例通过 JavaScript 或后端逻辑来决定是否应用该样式例如在特殊日期自动启用灰度滤镜使页面整体颜色变淡以达到纪念或突出特定主题的效果