怎么在HTML表格中通过mask-size调整表格蒙版图片的尺寸-html教程-PHP中文网

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表格中通过mask-size调整表格蒙版图片的尺寸

mask-size 不能直接用在

上

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

真正能生效的，必须是一个具有明确盒模型、且未被表格布局机制“截断”的容器：比如给 <td> 套一层 <code><div>，再对这个 <code><div> 应用 mask。 <h3>想缩放蒙版图？先确保 mask-image 已正确挂载</h3> <p>即使你把 mask 加到 <code><div> 上，<code>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%; }

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

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

表格单元格（<td>）通常没有固定宽高比，内容撑开后可能又窄又高，或又宽又矮。这时： <ul><li> <code>mask-size: cover → 蒙版图强制填满整个 <td> 区域，但可能裁边（比如 logo 被切掉顶部） <li> <code>mask-size: contain → 蒙版图完整显示，但四周留白，尤其在宽单元格里容易显小、偏居中

mask-size: 80px 80px → 更可控，但需预估单元格最小尺寸，否则在小屏下溢出或被压缩

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

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

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

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