如何利用CSS Mask属性自定义Bootstrap 5的图标遮罩效果？-css教程-PHP中文网

mask属性对bootstrap 5图标无效，因bi-icon等svg图标使用渲染于影子dom，外部css无法穿透；须转为完整svg（含）并内联定义，或改用mask-image配合位图/渐变。

如何利用css mask属性自定义bootstrap 5的图标遮罩效果？

Mask 属性在 Bootstrap 5 图标上为什么无效？

因为 Bootstrap 5 默认图标（如 bi-icon）是 SVG 元素，而 mask CSS 属性对内联 SVG 的子元素（比如 <svg><use></use></svg>）不起作用——浏览器会把 <use></use> 渲染为影子 DOM 内容，外部 CSS 无法穿透遮罩。

真正能生效的，是直接操作 SVG 原始结构，或改用 mask-image 配合位图/内联 SVG mask 定义。

别对 <i class="bi bi-heart"></i> 直接写 mask: url(#my-mask)，它不会生效
必须把图标转成完整 SVG（去掉 <use></use>，保留 <path></path>），再包裹一层容器用于应用 mask
Bootstrap 5 的图标字体（bi 字体）也不支持 mask，只适用于 SVG 形式

如何用内联 SVG 定义 mask 并应用到 Bootstrap 图标

核心是把 mask 定义嵌入 HTML 同一文档中（避免跨域或引用失败），并确保 mask 元素和目标 SVG 在同一 DOM 上下文。

<div class="icon-container">
  <svg viewbox="0 0 16 16" width="48" height="48"><defs><mask id="circle-mask"><circle cx="8" cy="8" r="6" fill="white"></circle></mask></defs><g mask="url(#circle-mask)"><path d="M8 0c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 15c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path></g></svg>
</div>

注意：上面的 <path></path> 是从 Bootstrap 官方 SVG 源码里复制的（比如 bi-alarm），不是字体类名；你得去 Bootstrap Icons 页面点开图标 → “Copy SVG” 才能拿到真实路径数据。

mask 必须定义在 <defs></defs> 里，且 id 唯一
mask 内部用白色表示“显示区域”，黑色表示“隐藏”，灰度值控制透明度
不要用 mask-border 或 mask-composite，它们兼容性差（Safari 不支持）

用 CSS `mask-image` 实现动态遮罩（如渐变、图片）

如果想用 PNG、渐变或 CSS 函数控制遮罩形状，mask-image 更灵活，但需注意 SVG 图标必须是块级或行内块，且不能被 display: inline 截断渲染流。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

例如让图标从左到右淡入：

.masked-icon {
  display: inline-block;
  width: 48px;
  height: 48px;
  -webkit-mask-image: linear-gradient(to right, transparent, black);
  mask-image: linear-gradient(to right, transparent, black);
}

搭配 Bootstrap SVG 使用时，仍需确保图标是完整 SVG 元素（非 <i></i> 标签），否则 mask 不会作用于内部图形。

mask-mode: alpha 是默认值，适合 SVG；若用 PNG mask 图，建议显式声明 mask-mode: luminance 避免意外反色
Firefox 对 mask-image 支持良好，但 Safari 要求加 -webkit- 前缀且不支持 mask-position 百分比值
别在 <i class="bi bi-x"></i> 上直接加 mask-image —— 它只是字体，没有像素可遮罩