直接给table加filter:grayscale(100%)无效，因filter作用于渲染像素内容，而table是容器；需对img等媒体元素单独加滤镜，整表灰度应设html{filter:grayscale(100%)}并防层叠上下文断裂。

为什么直接给

加filter:grayscale(100%)没反应

因为 filter 不作用于表格结构本身，而是作用于元素的“渲染输出”——<table> 是个容器，自身不渲染像素内容；真正需要灰度的是里面的 <code><img>、<canvas></canvas> 或内联 SVG。如果你只给 table 加 filter: grayscale(100%)，而单元格里全是文字或空 div，那根本看不出变化。

表格里有图片时，filter该加在谁身上

必须加在图片元素上，不是 td、不是 tr、更不是 table：

• ✅ 正确：<img src="avatar.jpg"> → 给这个 img 加 filter: grayscale(100%)
• ❌ 错误：td { filter: grayscale(100%) } —— 多数浏览器不支持对空容器应用滤镜生效
• ⚠️ 隐患：如果 td 用了 background-image，filter 完全无效，必须换成 <img>

想让整张表（含文字+图片）变黑白，得这么写

唯一可靠方式是把 filter 加到 html 或 body 上，但要注意作用域断裂：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 必须用 html { filter: grayscale(100%) }，body 不够覆盖 position: fixed 弹窗或导航栏
• 检查是否触发了新层叠上下文：transform、will-change、opacity: 0.99 都会让子元素脱离滤镜作用域
• iframe、video、canvas 不受父级 filter 影响，需单独加类或 JS 注入样式
• 文字会变灰，但对比度可能下降；如需增强可叠加 contrast(1.1)，但注意顺序：filter: grayscale(100%) contrast(1.1)

transition动画在表格里容易卡顿的真相

表格布局本身不触发硬件加速，filter 过渡容易掉帧，尤其在 Safari 或低端 Android 设备上：

• 给 img 加 will-change: filter 能缓解，但别滥用——只在 hover 或 JS 切换前临时加
• 避免在 td 上写 transition: all，它会强制重绘整个表格行，性能爆炸
• 移动端慎用 :hover，改用 click + classList.toggle()，并加 touch-action: manipulation
• 表格宽高未固定时（比如靠 table-layout: auto），filter 动画可能伴随 layout shift，先设 table-layout: fixed + 显式 width

表格里真正难的不是加一行 CSS，而是当某列文字突然不灰了、某张图在 iOS 上闪一下、或者导出 PDF 时灰度消失——这些都不是 bug，是渲染管线分层和合成策略的自然结果。你得知道该去查哪一层，而不是反复改 grayscale(100%) 的括号里填什么数字。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！