Unity三渲二实战：从初音立绘到实时NPR渲染的完整流程
2026/9/28 15:13:23
很多做网站的朋友都会遇上这样一个需求：某个特殊纪念日、突发公共事件或者平台周年悼念时刻，需要让整站快速变成黑白灰色调，表达庄重与敬意。以前一般会去找现成插件，要么下载个重量级库，要么在模板后台一顿猛改。其实这件事用原生html配合一点CSS和JavaScript就能轻松搞定，纯前端无依赖，加一个按钮还能实现“一键切换黑白模式”，用户侧和后台侧都很方便。这篇文章就把原理、写法、调试和坑一次性讲透，适合前端入门开发者、网站运营维护人员，以及想快速实现“哀悼模式”的博主和站长参考。
1. 项目思路与需求拆解
1.1 黑白模式的核心原理：不是把图片PS掉，而是给页面加滤镜
先说结论：现代浏览器里实现整站黑白最直接的手段，是对根节点使用CSS滤镜filter: grayscale(1)。这个属性会把元素及其后代整体渲染成灰度效果，等于在绘制层叠加了一个去色处理。因为CSS滤镜作用于最终呈现的像素，而不是改变图片源文件，所以不用动任何图片资源、不用替换背景图、不用改CSS里的颜色变量，一根干干净净的样式规则就能让整站“褪色”。
原理上要理解一点：grayscale(1)严格说不是把颜色变黑，而是把彩色饱和度压到零。饱和度为零后，原本的亮色、暗色都会按照亮度映射成灰阶，深色区域接近黑，浅色区域接近白，所以整体看起来就是我们认知中的黑白色。如果希望更柔和地过渡，可以用grayscale(0.5)，保留一点点饱和度，视觉上更像“浅灰滤镜”。
1.2 为什么坚持用原生html方案，不引入第三方库
很多人觉得这种功能封装成插件更方便，但我不太推荐在这种单一需求上引入库。原因很直接：为了一个防抖函数就载入几十千字节的JS，为了一个开关按钮就引入整个UI框架，成本和收益完全不成正比。原生html的方案没有任何安装成本，直接复制几行代码过去就能工作，不依赖构建工具、不依赖CDN、不依赖后端环境。
用原生方案还有个额外好处：不受框架版本约束。不管你的网站是纯静态页面、WordPress模板、Hexo博客，还是基于React/Vue打包后的产物，只要最终渲染结果是标准HTML和CSS，这段原生代码就永远适用。我在实际项目里用这套思路，插到过三类完全不同架构的站点里，全部零冲突运行。这一点是很多花哨插件做不到的。
1.3 一键切换的交互设计：用户想怎么控制黑白模式
说是“一键”，意味着不能只满足于“打开页面就是黑白”。更常见的需求是：给用户一个切换按钮，让它能在彩色和黑白之间自主切换；或者给网站后台一个简单开关，由运营者决定何时启用。还有一类特殊场景：博客作者希望特定文章页加载后自动进入黑白模式，读完后一键恢复。
根据这些需求，交互设计上需要覆盖三层：
- 全局生效：黑白状态记录在本地存储或Cookie中，刷新后仍保持。
- 手动控制：页面上放一个浮动的开关按钮，点击切换。
- 自动触发：通过URL参数、特定时间、用户点击事件等方式自动进入/退出。
这个项目里我会把三层都实现出来，但核心代码控制在50行以内，读完你就知道为什么原生方案这么能打。
2. 核心代码实现与参数解析
2.1 最基础的CSS规则：一根滤镜搞定99%的灰阶需求
直接上手的话，第一步只要写一行CSS：
html.grayscale { filter: grayscale(1); -webkit-filter: grayscale(1); }在<html>标签上挂一个grayscale类，页面全灰。如果担心旧版浏览器兼容，再加上-moz-filter，不过现代主流浏览器基本都支持无前缀了。为什么选html根元素而不选body？因为<html>是文档根，能让背景颜色、滚动条、所有后代元素全部进入滤镜范围。如果只挂在body上，一些原生渲染的滚动条和特殊背景可能漏灰，看着很不完整。
有人会问：为什么不直接写全站CSS* { filter: grayscale(1) }？那样的话性能非常差，滤镜会大量重复计算，更麻烦的是如果页面里有弹窗、固定定位元素，层级一乱就会异常。所以我强调：灰阶作用在根节点，而不是每个标签。
2.2 JavaScript部分：切换按钮、状态记忆与自动恢复
要完成“一键”操作，还得有一个按钮。最简单的方式是给某个元素绑定点击事件，切换html的class，同时把状态写进localStorage。以下是经常用到的最小完整版本：
const html = document.documentElement; const toggleBtn = document.getElementById('gray-toggle'); if (localStorage.getItem('gray-mode') === 'on') { html.classList.add('grayscale'); } toggleBtn.addEventListener('click', function () { html.classList.toggle('grayscale'); const isGray = html.classList.contains('grayscale'); localStorage.setItem('gray-mode', isGray ? 'on' : 'off'); });这段代码的运行逻辑很清楚：
- 页面加载时检查本地存储里有没有
gray-mode=on。 - 如果有，自动给根节点加灰阶类。
- 点击按钮时切换类名，并同步更新存储状态。
这里的关键点是为什么要用classList而不用直接改style.filter。因为类名切换的语义更清晰，多个功能模块可以通过同一个类协同工作，也方便在CSS里用统一规则管理。直接用style.filter虽然也能实现，但会被内联样式级别“钉死”，以后再想用CSS覆盖就很被动，调试时也不好定位。
2.3 高级玩法：URL参数触发、定时自动开关与按钮状态同步
只做基础切换其实不够“一键”。我通常会把功能做得更完整一点，比如带一个URL参数，方便运营直接把指定链接发给用户：
// 支持 ?gray=on const params = new URLSearchParams(window.location.search); if (params.get('gray') === 'on') { html.classList.add('grayscale'); localStorage.setItem('gray-mode', 'on'); }还有定时自动切换，比如悼念时段是当天0点到24点，可以封装一个小函数比较日期。注意时区差异，如果网站访问者分布在不同时区，最好以服务器时间为准，或者让后台输出一个触发状态。这里原生JS也完全可以胜任，不需要引入moment.js这种重库，直接操作Date对象就行。
按钮状态同步方面，如果页面里有一或多个“切换黑白”的按钮，需要保证按钮文案跟着状态变化。我习惯在切换函数里统一更新所有标记了[data-gray-btn]的元素：
const grayEnabled = html.classList.contains('grayscale'); document.querySelectorAll('[data-gray-btn]').forEach((el) => { el.textContent = grayEnabled ? '恢复彩色' : '黑白模式'; });这样的好处是，不管用户从哪个入口触发了黑白模式，所有按钮都会保持一致，不会出现“一个按钮开着，另一个按钮写着开”的问题。
3. 实操过程与完整代码实现
3.1 可直接复制的三件套：HTML结构、CSS滤镜、原生JS逻辑
下面给出一套可以在真实站点里直接套用的完整代码。这个版本覆盖了手动切换、本地存储、URL参数、按钮文案同步，并且对功能做了防错处理。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网站黑白模式一键切换</title> <style> html.grayscale { filter: grayscale(1); -webkit-filter: grayscale(1); } html.grayscale body { background: #fff; } #gray-switch { position: fixed; right: 20px; bottom: 20px; z-index: 9999; padding: 10px 16px; border: 0; border-radius: 6px; background: #333; color: #fff; cursor: pointer; font-size: 14px; line-height: 1.4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: background 0.2s; } #gray-switch:hover { background: #555; } </style> </head> <body> <div style="text-align:center; padding:80px 20px;"> <h1>原生 html 黑白模式示例</h1> <p>点击右下角按钮，看整站一键变色。</p> <img src="https://picsum.photos/400/200" alt="示例彩色图片"> </div> <button id="gray-switch" type="button">黑白模式</button> <script> (function () { var html = document.documentElement; var btn = document.getElementById('gray-switch'); function setGray(on) { if (on) { html.classList.add('grayscale'); } else { html.classList.remove('grayscale'); } try { localStorage.setItem('gray-mode', on ? 'on' : 'off'); } catch (e) { // 隐私模式下 localStorage 可能不可用，忽略即可 } syncBtn(); } function syncBtn() { var enabled = html.classList.contains('grayscale'); if (btn) { btn.textContent = enabled ? '恢复彩色' : '黑白模式'; } } // URL 参数优先：?gray=on 或 ?gray=off var params = new URLSearchParams(window.location.search); var autoGray = params.get('gray'); if (autoGray === 'on') { setGray(true); } else if (autoGray === 'off') { setGray(false); } else { var saved = null; try { saved = localStorage.getItem('gray-mode'); } catch (e) {} // 只有明确记录为 on 时才进入黑白；其他情况默认彩色 setGray(saved === 'on'); } if (btn) { btn.addEventListener('click', function () { var enabled = html.classList.contains('grayscale'); setGray(!enabled); }); } })(); </script> </body> </html>建议你把这段单独保存成demo.html，直接用浏览器打开，点一下按钮感受效果。整体代码没有依赖任何CDN，也无需构建，符合“原生html一键实现”这个需求。
3.2 参数选择细节：为什么grayscale(1)而不是100%，transition有必要吗
grayscale支持百分比写法和数值写法，grayscale(100%)和grayscale(1)完全等价。我习惯用1，因为数值写起来更简单。但如果你希望切换过程像淡入淡出一样柔和，可以给根节点加一个过渡：
html.grayscale { filter: grayscale(1); -webkit-filter: grayscale(1); transition: filter 0.5s ease; }注意，这里有个看起来合理但实际效果存疑的细节：CSS的filter过渡在很多浏览器上不能对整页大幅变化做流畅插值，尤其是页面元素多、图片多的时候，过渡过程不是处理不过来，就是看着很“生硬”甚至闪烁。我个人实测下来，0.5秒以上的过渡在大型页面上风险很高，0.2秒到0.3秒勉强能用。所以如果目标是悼念场景，我建议不要做长过渡，直接切换，干净利落。
3.3 把“一键”做成嵌入式代码：适合给不同页面批量注入
很多后台系统并没有统一的模板结构，尤其老项目，可能不同栏目用了各自独立的页面头。这时候逐页贴完整代码很蠢，更好的是做一个公共脚本，比如gray-mode.js，在关键路径统一引入。脚本里可以用事件委托，动态识别按钮：
document.addEventListener('click', function (e) { var target = e.target.closest('[data-gray-toggle]'); if (!target) return; var html = document.documentElement; html.classList.toggle('grayscale'); var enabled = html.classList.contains('grayscale'); try { localStorage.setItem('gray-mode', enabled ? 'on' : 'off'); } catch (err) {} });这样不管按钮出现在哪个页面、是静态写死还是后台动态渲染出来的，都能生效。使用事件委托还有一个好处：按钮通过异步加载出现时，我们不会被“事件绑定早了”的问题困扰。我处理多个老站点时就是用这种方式，把脚本放到统一定位，页面里只需要给任意元素加>html.grayscale { --bg: #f0f0f0; --text: #222; --border: #c8c8c8; filter: grayscale(1); }
这样做的原因是，滤镜对颜色纯度高的区域会导致某些相邻颜色灰度值接近，边界变得模糊。典型例子是红蓝按钮放在一起，去色后可能都是同一种灰，很难分清。通过同步修改变量，可以在保持滤镜的同时，主动拉开关键区域的明暗层次，让页面在黑白模式下依然具备清晰的阅读引导。
5.2 定时任务与自动生效：后台配置一个悼念时段
很多新闻类网站会提前知道某个时段需要整站黑白，比如某个纪念日上午8点到晚上10点。这个需求非常适合用原生JS实现，不需要后端定时任务。思路很简单，写一个函数比较当前时间和配置窗口：
function shouldAutoGray() { var now = new Date(); var startHour = 8; var endHour = 22; var h = now.getHours(); return h >= startHour && h < endHour; }更精确的日期区间也可以算，核心就是返回一个布尔值。脚本加载时根据结果自动加入grayscale类，同时慎重处理边界情况：如果用户手动把状态改成彩色，定时器要不要继续覆盖？我习惯是：手动优先，定时任务只是默认值。如果用户明确选择了彩色，就不再自动切灰，除非刷新后重新判断。这样既照顾运营需求，也不至于强制用户处于不可控的黑白模式。
5.3 为无障碍与阅读体验做优化
黑白模式不只是悼念，有时候也是阅读模式的一个分支。一些对高对比度有需求的用户，会更喜欢低饱和界面。这时候可以继续把方案做扎实一点：在灰阶基础上，把链接颜色、按钮强调色通过CSS变量调整为更温和的灰蓝色，或者给图片加一点点透明度，减少刺眼感。同时别忘了加aria-pressed状态到切换按钮，方便屏幕阅读器朗读：
<button>var clickTimer = null; btn.addEventListener('click', function () { if (clickTimer) return; clickTimer = setTimeout(function () { clickTimer = null; }, 300); // 切换逻辑 });另外，移动端把按钮放在右下角时，很容易被用户拇指误触。建议在按钮上增加confirm式交互吗？没必要，但可以加一个短小的“已切换为黑白模式”Toast提示，让用户感知到操作已生效。这样误触了也能立刻知道状态变化，再点一下就能回来。
6.3 把判断逻辑前置到
渲染前，避免首屏“闪彩色”很多时候页面加载时会先闪一下彩色，然后才变灰，这在严肃场景里很刺眼。原因是脚本放在<body>尾部，而根节点类名加得太晚。优化方法是把一小段内联脚本放在<head>里，提前读取状态并加类，确保首批帧渲染时html已经是灰阶：
<script> (function () { try { var saved = localStorage.getItem('gray-mode'); var urlGray = new URLSearchParams(location.search).get('gray'); if (urlGray === 'on' || saved === 'on') { document.documentElement.classList.add('grayscale'); } } catch (e) {} })(); </script>这比放到body尾部至少提前几百毫秒生效，直接消除彩色闪烁。这段代码不需要等DOM ready，因为document.documentElement在文档解析开始时就已存在。这是原生html方案里很精髓的一个优化点，我希望每个用这个功能的人都能知道。
6.4 最终的轻量代码该如何组织
对于一个成熟站点，我建议把灰度模式相关代码拆成三个独立文件，而不是一股脑塞进页面：
gray.css：负责根节点灰阶、变量、兼容前缀。gray.js：负责本地存储、按钮事件、URL参数。- 内联启动脚本：放在
<head>，专门处理首屏无闪烁。
这样的拆分让不同职责清晰，将来移除时也干净。不要把它写成一个大杂烩，因为一旦站点升级或换主题，拆分的文件反而更好维护。
最后分享一个个人观点：技术难度的确不高，但真正让这个功能“好用”的，全是细节。原生html的一键黑白模式，虽然代码不到50行，但涉及渲染层、交互层、状态层、无障碍层的配合，做扎实之后能给用户留下非常可靠的印象。尤其在一些特殊日子里，一个顺滑、稳定、不掉链子的黑白模式，比任何花哨的动画都更有分量。