如何实现以动态自适应内容的div作为父元素背景图的裁剪遮罩？

完全可以用纯CSS实现，不需要JavaScript动态设置background-position。下面提供两种可行方案：

方案一：兼容性优先（支持所有现代浏览器） #

利用伪元素分层实现：通过两个伪元素分别设置背景图和覆盖层，让目标文本区域透出背景图。

.background {
  position: relative;
  text-align: center;
  min-height: 100vh; /* 撑满视口高度，可根据需求调整 */
}

/* 底层：全屏背景图 */
.background::before {
  content: '';
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  background: url('你的背景图地址') center/cover no-repeat;
  z-index: -2;
}

/* 中间层：覆盖全屏的遮罩（除文本区域外） */
.background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff; /* 非文本区域的背景色，可自定义 */
  z-index: -1;
}

.text {
  display: inline-block;
  margin: 20px;
  padding: 20px;
  position: relative;
  z-index: 1; /* 让文本区域在遮罩层上方，透出底层背景图 */
  color: #fff; /* 可选：让文字更清晰 */
}

<div class="background">
  <div class="text">
    My text is in here
  </div>
</div>

原理说明 #

1. .background::before 生成全屏的背景图层，置于最底层；
2. .background::after 生成全屏的遮罩层，覆盖在背景图之上；
3. .text 通过设置更高的z-index，让自身区域不受遮罩层影响，从而透出下方的背景图；
4. 无论.text的宽度如何变化（由内容决定），该方案都能自动适配。

方案二：现代浏览器简洁方案（Chrome 115+/Firefox） #

利用CSS element() 函数直接将.text元素作为遮罩，实现背景图仅在文本区域显示：

.background {
  background: url('你的背景图地址') center/cover no-repeat;
  text-align: center;
  min-height: 100vh;
  /* 使用.text元素作为遮罩 */
  mask: element(.text);
  -webkit-mask: element(.text);
}

.text {
  display: inline-block;
  margin: 20px;
  padding: 20px;
  color: #fff; /* 可选：让文字更清晰 */
}

<div class="background">
  <div class="text">
    My text is in here
  </div>
</div>

原理说明 #

element() 函数可以将指定DOM元素的形状作为遮罩层，.background的背景图只会在.text元素覆盖的区域显示，完全适配.text的动态尺寸变化。

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