如何用CSS实现背景色与图标的反向遮罩效果？

刚好有个简洁的纯CSS方案能满足你的需求，不用修改图标文件，也完全符合你提出的所有限制条件：

核心思路 #

利用CSS mask-image 结合 mask-composite 属性，实现「保留背景色，仅图标区域透明」的反向遮罩效果。我们会同时使用两个遮罩层：一个全填充的纯色渐变（作为基础遮罩），加上你的图标遮罩，通过组合规则让图标区域从背景中"挖空"。

代码实现 #

<div class="pink-box"></div>

.pink-box {
  width: 300px;
  height: 300px;
  background-color: pink;
  /* 遮罩层：图标 + 全白渐变（顺序很重要） */
  mask-image: url("你的图标地址"), linear-gradient(#fff, #fff);
  mask-size: contain; /* 让图标自适应容器大小 */
  mask-position: center center;
  mask-repeat: no-repeat;
  /* 组合规则：用基础渐变遮罩减去图标遮罩的区域 */
  mask-composite: exclude;
  /* 针对webkit内核浏览器的兼容写法（你说不用考虑兼容性可忽略） */
  -webkit-mask-composite: source-out;
}

原理解释 #

1. mask-image 同时指定了两个遮罩：图标在前，全白渐变在后。
2. mask-composite: exclude 会取两个遮罩层不重叠的部分作为最终显示区域——也就是全白渐变的范围减去图标覆盖的区域，这样图标所在的位置就会变成透明，周围保留粉色背景。
3. mask-size: contain 和 mask-position: center 确保图标在容器内居中且完整显示。

备选方案（双层元素叠加） #

如果对 mask-composite 不太熟悉，也可以用双层元素的方式实现：

<div class="pink-box">
  <div class="mask-layer"></div>
</div>

.pink-box {
  width: 300px;
  height: 300px;
  background-color: pink;
  position: relative;
}

.mask-layer {
  position: absolute;
  inset: 0;
  background-color: pink;
  mask-image: url("你的图标地址");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  /* 让遮罩层的颜色和背景混合，实现挖空效果 */
  mix-blend-mode: screen;
}

这个方案的原理是：底层是粉色背景，上层的遮罩层只显示图标区域的粉色，通过mix-blend-mode: screen让上层图标区域的粉色和底层粉色混合后"消失"，从而露出下方的页面背景，达到图标区域透明的效果。

两种方案都能完美实现你要的效果，选哪种都可以～

内容的提问来源于stack exchange，提问作者4wk_