table 元素不支持 mask-size，需用 div 包裹 td 后应用；mask-size 生效需同时声明 -webkit-mask-image 和 mask-image、mask-repeat: no-repeat、mask-size 非 auto；cover 会裁剪，contain 会留白，建议优先试 contain 并配合 mask-position 调整。

html-deploy

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

下载

mask-size 不能直接用在

上

HTML 表格本身不支持 mask-image 或 mask-size —— 这些 CSS 属性只对「绘制层」生效，而 <table> 默认是 display: table，其子元素（<tr>、<td>）也不自动继承 mask 渲染上下文。你写 table { mask-image: url(mask.png); mask-size: cover; }，浏览器根本不会解析 mask，更别说尺寸调整了。

真正能生效的，必须是一个具有明确盒模型、且未被表格布局机制“截断”的容器：比如给 <td> 套一层 <div>，再对这个 <div> 应用 mask。

想缩放蒙版图？先确保 mask-image 已正确挂载

即使你把 mask 加到 <div> 上，mask-size 也不会起作用，除非以下三点全部满足：

• 同时声明 -webkit-mask-image 和 mask-image（仅写后者在 Safari/Chrome 旧版会失效）
• mask-repeat 显式设为 no-repeat（默认是 repeat，小蒙版图会密铺）
• mask-size 不能是 auto（各浏览器行为不一致，等同于没设）

错误示例：
div { mask-image: url(logo.svg); } → 蒙版图缩成 0×0 或满屏拼贴，mask-size 形同虚设。

立即学习“前端免费学习笔记（深入）”；

正确写法：
div { -webkit-mask-image: url(logo.svg); mask-image: url(logo.svg); mask-repeat: no-repeat; mask-size: 100% 100%; }

mask-size 的值选 cover 还是 contain？取决于表格单元格宽高比

表格单元格（<td>）通常没有固定宽高比，内容撑开后可能又窄又高，或又宽又矮。这时：

• mask-size: cover → 蒙版图强制填满整个 <td> 区域，但可能裁边（比如 logo 被切掉顶部）
• mask-size: contain → 蒙版图完整显示，但四周留白，尤其在宽单元格里容易显小、偏居中
• mask-size: 80px 80px → 更可控，但需预估单元格最小尺寸，否则在小屏下溢出或被压缩

建议优先试 contain，再根据实际渲染效果微调 mask-position（如 mask-position: top left）来对齐关键区域。

表格里用 mask 的真实代价：性能和可维护性

mask 在每个 <td> 内单独应用，意味着：

• 每张蒙版图都要额外 HTTP 请求（除非 base64 内联，但增大 HTML 体积）
• 滚动时大量 mask 计算易触发重绘，尤其在移动端 Safari 上帧率明显下降
• 编辑器（如 TinyMCE）会过滤 mask-image 样式，导致富文本环境里蒙版直接消失

如果只是要“让图片按固定比例缩进表格”，object-fit: cover + width: 100%; height: 100% 更轻量、兼容性更好；mask 真正适合的场景，是需要非矩形裁切（比如圆角缺口、波浪边缘），而且你愿意为这点视觉差异多写三倍 CSS 并接受调试成本。