最简全网页黑白模式用 filter: grayscale(100%)，直接在 中设置 body { filter: grayscale(100%); } 即可，兼容性好、零 JS、加载即生效；切换时应操作 style.filter 并调用 offsetHeight 防抖动，禁用时用 none 而非 grayscale(0%)。
直接用 CSS filter 实现最简黑白效果
全网页黑白模式本质是把所有颜色转为灰度，filter: grayscale(100%) 是最轻量、兼容性最好的方案。它不改变 HTML 结构，也不依赖 JS，加载即生效。
在 index.html 的 中加入以下样式即可：
<style>
body {
filter: grayscale(100%);
}
</style>
注意：该滤镜会作用于整个 body 及其所有子元素（包括图片、SVG、iframe 内容等）。若页面含第三方组件（如地图、视频播放器），部分内嵌内容可能因跨域或 canvas 渲染而无法被滤镜覆盖。
需要开关切换时，避免用 class 切换 filter 值
很多人写 .grayscale { filter: grayscale(100%) } 然后靠 JS 切换 class，这会导致重排重绘抖动，尤其在 Safari 和旧版 Chrome 中明显卡顿。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是用 style 属性直写，配合 requestAnimationFrame 避免布局抖动：
function toggleGrayscale(on) {
document.body.style.filter = on ? 'grayscale(100%)' : 'none';
// 强制触发重绘，减少闪烁
document.body.offsetHeight;
}
- 不要用
filter: grayscale(0%)关闭——它仍会触发滤镜管线，性能不如none - 若需过渡动画，
filter支持 CSS transition，但仅限数值变化（如grayscale(0%) → grayscale(100%)），不能从none过渡 - IE 完全不支持
filter，如需兼容 IE，得回退到 SVG 滤镜或 JS 遍历改色，但代价极高，一般不建议
图片和 SVG 单独处理时的常见坑
多数情况下 filter: grayscale(100%) 能覆盖 <img alt="index.html如何实现全网页黑白模式？" > 和内联 <svg></svg>，但遇到以下情况会失效：
-
<img src="xxx.png" alt="index.html如何实现全网页黑白模式？" >加了loading="lazy"且尚未加载完成时，滤镜可能不生效（Chrome 旧版本） -
<svg></svg>使用了fill或stroke的currentcolor，而父元素文本色未设，导致灰度异常 - 背景图用
background-image时，若同时设了background-color，灰度只作用于图片，底色不变——需额外统一设为灰色系
稳妥起见，可加一条兜底规则：
<style>
img, svg, [role="img"] {
filter: grayscale(100%) !important;
}
</style>
暗色模式下开启黑白，别直接叠加两个 filter
如果页面已适配 @media (prefers-color-scheme: dark)，又想在此基础上再开黑白，不要写成 filter: invert(100%) grayscale(100%)——顺序错乱或重复应用会导致色彩崩坏，尤其对半透明元素。
正确做法是合并逻辑，在 JS 中统一计算最终 filter 值：
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isGrayscale = localStorage.getItem('grayscale') === 'on';
const value = isGrayscale ? 'grayscale(100%)' : 'none';
document.body.style.filter = value;
关键点在于：黑白是独立视觉层，和明暗无关；强行叠加不仅难调试，还会让屏幕阅读器、打印样式、截图工具行为不可预测。
