如何实现文字移除DIV背景色的背景融合效果

抱歉我的表述不够清晰，不知该如何准确描述需求。
我做了一些调研，但因不确定搜索关键词，没能找到太多相关内容。
我想要重现以下效果（仅参考下半部分）

我想创建一个DIV元素，其中的文字能够移除DIV自身的背景色，通过与背景融合的方式实现该效果。
再次抱歉若问题表述仍不清晰，我正在努力学习中 :)

你需要的是文字挖空DIV背景、透出页面底层背景的效果，用CSS的mix-blend-mode或者background-clip: text就能实现，以下是两种可行方案：

方案一：使用mix-blend-mode混合模式 #

这种方法通过文字与DIV背景的颜色混合，透出底层页面背景，适配各种页面背景类型。

HTML结构 #

<div class="cutout-container">
  背景穿透文字
</div>

CSS代码 #

/* 设置页面底层背景 */
body {
  background: linear-gradient(45deg, #ff7f50, #1e90ff, #32cd32);
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 目标DIV容器 */
.cutout-container {
  position: relative;
  font-size: 5rem;
  font-weight: bold;
  padding: 2.5rem;
  color: #fff; /* 文字颜色设为白色，用于混合 */
}

/* 生成DIV的背景层 */
.cutout-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* DIV自身的背景色 */
  z-index: -1;
}

/* 混合模式实现穿透效果 */
.cutout-container {
  mix-blend-mode: screen;
}

方案二：使用background-clip:text #

这种方法直接将文字区域设为透明，让页面背景透过文字显示，DIV其他区域保留自身背景。

HTML结构 #

<div class="text-clip-box">
  背景融合文字
</div>

CSS代码 #

body {
  background: url('你的页面背景图地址') center/cover no-repeat;
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-clip-box {
  font-size: 5rem;
  font-weight: 900;
  padding: 2.5rem;
  /* 将文字颜色设为透明 */
  color: transparent;
  /* 让文字裁剪页面背景 */
  background-clip: text;
  -webkit-background-clip: text;
  /* DIV自身的背景色 */
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.6);
}

说明 #

• 方案一的mix-blend-mode适配性更强，不管页面背景是渐变、图片还是纯色都能生效；
• 方案二的background-clip:text需注意浏览器兼容性（webkit内核需加前缀），适合页面背景固定的场景。

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