怎么在HTML表格中通过mask-image为表格添加遮罩渐变效果-html教程-PHP中文网

mask-image在table元素上基本无效，因表格display值不支持遮罩；须用block容器包裹table并设置mask-image（含-webkit前缀）及linear-gradient（仅black/transparent），同时确保容器高度足够且无overflow:hidden冲突。

怎么在html表格中通过mask-image为表格添加遮罩渐变效果

mask-image 在 table 元素上基本无效

直接对 <table>、<code><tr> 或 <code><td> 设置 <code>mask-image 几乎不会生效 —— 因为表格元素默认是 display: table / table-row / table-cell，而这些 display 值不支持 mask（CSS Masking 规范明确要求被遮罩元素必须是“可绘制的块级容器”，且不能是 table 盒模型）。浏览器会静默忽略该样式。

可行方案：用 wrapper div 包裹 table 并应用 mask-image

真正起作用的方式是把 <table> 放进一个普通块级容器（如 <code><div>），对该容器设置 <code>mask-image。注意以下关键点：

包裹 <div> 必须设 <code>display: block（默认就是）且不能有 overflow: hidden 冲突（mask 依赖 overflow visible 才能正确合成）
mask-image 推荐用 linear-gradient，例如 mask-image: linear-gradient(to bottom, black 0%, transparent 100%)
必须同时设置 -webkit-mask-image 以兼容 Safari（目前 Safari 仍不支持无前缀的 mask-image）
mask 默认作用于整个盒区域，若想只遮罩表格内容区（比如底部渐隐），需确保 wrapper 高度足够、table 不撑高容器

```html
<div style="
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
">
  <table>...</table>
</div>
```

常见失效原因和调试技巧

即使用了 wrapper，效果仍不出现？大概率是这几个问题：

mask-image 的渐变颜色写成 white/black/transparent 混用 —— 必须全用 black 和 transparent（alpha 通道才有效），white 在 mask 中等价于完全不遮罩，容易误判
wrapper height 被限制（如设了固定 height 或 max-height），导致 mask 区域被裁剪；建议用 min-height 或让其自然包裹
table 本身有 border-collapse: collapse + border，可能让 mask 边缘看起来断裂 —— 可临时加 background: white 到 wrapper 检查 mask 覆盖范围
Chrome 115+ 开始支持 mask-border，但和 mask-image 无关，别混淆

替代方案：用 background-gradient + pointer-events:none 模拟

如果 mask 兼容性或调试成本太高，更稳妥的做法是用伪元素叠加渐变遮罩：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

给 wrapper 设 position: relative
用 ::after 伪元素覆盖底部区域，背景设为 linear-gradient(to bottom, rgba(255,255,255,0) 70%, white 100%)
加 pointer-events: none 确保不拦截表格交互
优点：100% 兼容，可控性强；缺点：不是真遮罩（比如无法遮住 box-shadow 或 outline）

真 mask 的边界控制和 alpha 精度更高，但仅当项目明确需要像素级渐隐（比如长表格滚动时动态遮罩）才值得折腾。