直接给 table 加 filter: blur() 会模糊整个表格内容，正确做法是用 backdrop-filter 实现毛玻璃效果或用伪元素隔离背景模糊，而非作用于 table 本身。

直接给 table 加 filter: blur() 会糊掉整个表格

这是最常踩的坑：写 filter: blur(8px) 到 table 或 tbody 上，结果文字、边框、单元格内容全糊了——filter 模糊的是元素自身及其全部子树，不是“背景”。表格不是透明容器，它没有“背后内容”可模糊，强行加只会让可读性崩坏。

想模糊表格底下的页面内容？用 backdrop-filter 覆盖层

适用场景：表格浮在滚动区域/图片/视频上方，需要毛玻璃感。关键不是操作 table 本身，而是套一层带半透明背景的遮罩：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• 给 table 外包一个 div 容器，设 position: relative
• 该容器内插入一个 ::before 伪元素，覆盖全表区域，设 z-index: -1
• 伪元素必须有 background-color: rgba(255,255,255,0.1)（不能纯白不透明）
• 加上 -webkit-backdrop-filter: blur(10px) 和 backdrop-filter: blur(10px)
• 确保该容器没设 overflow: hidden 或 contain: layout，否则背后内容被裁掉，模糊失效

想模糊表格自身的背景图？用伪元素隔离 filter

适用场景：表格有独立背景图（比如封面页表格），需背景虚化、文字清晰。不能把 filter 加在 table 上，得用伪元素承载背景：

• table 设 position: relative 且 background: none
• table::before 中显式写死 background-image、background-size: cover、background-position: center（inherit 不可靠）
• table::before 加 filter: blur(12px) 和 z-index: -1
• 若表格有圆角或 overflow: hidden，伪元素需扩出 10–20px（如 top: -15px），再由父容器兜底裁剪

移动端和 Firefox 的模糊表现不稳定

这不是代码写错，是现实限制：

• Safari 必须写 -webkit-backdrop-filter，漏掉前缀就完全无效
• Firefox 默认禁用 backdrop-filter（layout.css.backdrop-filter.enabled = false），@supports 也检测不出，只能降级为高透明度纯色背景
• 中低端安卓机上，blur() 值超过 10px 容易滚动卡顿，文字边缘发虚；建议用 8px 作为安全上限
• 表格行数多、单元格密集时，模糊层会触发额外合成层，慎用在长列表表格上

真正起效的模糊，永远发生在「内容与背景分离」的边界上。表格本身不是背景容器，它只是内容载体——要么让它浮起来模糊背后，要么给它配一个可剥离的背景层。硬套 filter 到 table 标签上，99% 是白忙活。

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