如何用子div遮罩父div？实现父背景瓦片的精准区域隐藏

嘿，这个需求我之前也碰到过，说白了就是要给父元素“挖个洞”，让子元素覆盖的那部分父背景消失，同时子元素的半透明内容还能正常显示对吧？给你几个实用的方案，按需选就行：

方案1：CSS Mask 精准实现（推荐给现代浏览器） #

这是最直接的反向遮罩方案，用CSS的mask-composite就能搞定，代码也清爽：

先写基础HTML结构：

<div id="parent">
  <div class="child">
    <!-- 这里放你的半透明内容 -->
  </div>
</div>

然后是核心CSS：

#parent {
  background: url('你的平铺背景图路径') repeat;
  position: relative;
  width: 500px; /* 根据你的需求设置宽高 */
  height: 500px;
  /* 构建遮罩：第一层全黑（显示父背景），第二层是子元素的形状（要挖掉的区域） */
  mask-image: linear-gradient(black, black), url('子元素的图片路径');
  mask-size: 100% 100%, 200px 200px; /* 第二个值对应子元素的宽高 */
  mask-position: 0 0, 20px 20px; /* 第二个值对应子元素的定位 */
  mask-repeat: no-repeat;
  /* 关键：让第一层遮罩减去第二层的区域，不同浏览器要加前缀 */
  mask-composite: exclude; /* Firefox 适用 */
  -webkit-mask-composite: source-out; /* Chrome/Safari 适用 */
}

.child {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  background: url('子元素的图片路径');
  opacity: 0.7; /* 你的半透明需求 */
}

原理很简单：父元素的遮罩由两个图层组成，全黑的图层让父背景全部显示，子元素形状的图层把对应区域“挖掉”，最后通过遮罩复合实现反向显示效果，子元素正常叠加在上面就行。

方案2：SVG Mask 兼容性拉满（适合旧浏览器） #

如果要兼容IE11这类老浏览器，SVG mask是更稳妥的选择，而且支持任意形状的遮罩：

先在HTML里加一个隐藏的SVG（用来定义遮罩）：

<svg width="0" height="0" viewBox="0 0 500 500"> <!-- viewBox对应父元素的宽高 -->
  <mask id="reverse-mask">
    <!-- 白色区域会显示父元素背景 -->
    <rect width="100%" height="100%" fill="white"/>
    <!-- 黑色区域就是要挖掉的部分，位置和尺寸和子元素一致 -->
    <rect x="20" y="20" width="200" height="200" fill="black"/>
  </mask>
</svg>

<div id="parent">
  <div class="child"></div>
</div>

然后CSS部分：

#parent {
  background: url('你的平铺背景图路径') repeat;
  position: relative;
  width: 500px;
  height: 500px;
  /* 引用SVG定义的遮罩 */
  mask: url(#reverse-mask);
  -webkit-mask: url(#reverse-mask);
}

.child {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  background: url('子元素的图片路径');
  opacity: 0.7;
}

这个方案的兼容性比纯CSS mask好很多，而且如果子元素是不规则形状，只要在SVG里画对应的路径就行，灵活性很强。

小提示 #

• 如果子元素的位置或尺寸是动态的（比如JS控制），那方案1可以用CSS变量来动态修改mask-size和mask-position，方案2则需要JS动态修改SVG里的矩形属性。
• 测试的时候注意不同浏览器的遮罩前缀，比如Webkit内核的浏览器要加-webkit-前缀。

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