原生html一键实现网站黑白模式

将网站设置为黑白色最简单、最通用的方法是通过 CSS 的 filter（滤镜） 属性。

以下是几种在原生 HTML 中实现的方法：

1. 最推荐：全局 CSS 方案

在你的 CSS 文件中，或者 HTML 文件的 <head> 标签内的 <style> 标签中添加以下代码。这是影响范围最广且性能最好的方式。

css 复制代码

html {
    /* 将整个页面转为 100% 灰度 */
    filter: grayscale(100%);
    
    /* 兼容旧版 Webkit 浏览器（如旧版 Chrome, Safari） */
    -webkit-filter: grayscale(100%);
    
    /* 兼容部分旧版 Firefox */
    -moz-filter: grayscale(100%);
    
    /* 兼容部分旧版 Opera */
    -o-filter: grayscale(100%);
    
    /* 兼容 IE 浏览器（如果需要支持非常老的 IE） */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

2. 最快速：行内样式方案

如果你只需要临时修改，且不想动 CSS 文件，可以直接将样式写在 <html> 标签上：

html 复制代码

<html style="filter: grayscale(100%); -webkit-filter: grayscale(100%);">

3. 进阶方案：使用 JavaScript 动态切换

如果你想通过一个按钮来控制网站是否变成黑白（例如"护眼模式"或"纪念模式"），可以使用 JS：

javascript 复制代码

// 开启黑白模式
function enableGrayscale() {
    document.documentElement.style.filter = "grayscale(100%)";
    document.documentElement.style.webkitFilter = "grayscale(100%)";
}

// 关闭黑白模式
function disableGrayscale() {
    document.documentElement.style.filter = "none";
    document.documentElement.style.webkitFilter = "none";
}

💡 注意事项与提示

性能消耗： filter: grayscale 会消耗一定的 GPU 资源。对于结构异常复杂的页面，滚动时可能会感到轻微卡顿。
绝对定位元素： 在极少数情况下，对 html 或 body 设置 filter 可能会导致某些 position: fixed 的元素失效（变为相对于 body 定位）。如果发现布局乱了，可以尝试将滤镜应用在最外层的容器 div 上。
兼容性： 目前主流的现代浏览器（Chrome, Edge, Firefox, Safari）均完美支持 grayscale 滤镜。