使Div蒙版背景图像与父级背景图像匹配

Question

我正在尝试实现一种效果，看起来像“容器” div正在反转“父” div的背景图像。从我的研究中，除了“ parent”和“ container”具有相同的大小和不同的背景，以及“ content” div掩盖了“ container” div，我似乎找不到其他方法。这是我想要的图像。

这是我的HTML：

<div class="parent">
  <div class="container">
    <div class="content">
    </div>
  </div>
</div>

“父” div具有正常背景，而“容器” div（与“父”大小相同）具有“父”背景的反转版本（通过第三方程序反转），我不打算反转通过CSS）。

我的问题是，我需要将哪些CSS应用于“内容”和“容器” div，以实现仅通过“内容” div显示“容器” div背景的蒙版？

Answer 1

一个想法是玩background-clip并调整填充以控制您从内部容器中显示多少背景：

.container {
  height: 300px;
  background: url(https://picsum.photos/1000/800?image=1069) center/cover;
}

.content {
  height: 100%;
  background: url(https://picsum.photos/g/1000/800?image=1069) center/cover;
  background-clip: content-box;
  padding: 100px calc(100% - 300px) 100px 50px;
  box-sizing: border-box;
}

<div class="container">
  <div class="content">
    Some text
  </div>
</div>

这也可以使用一个容器和多个背景来完成：

.container {
 height:300px;
 background:
    url(https://picsum.photos/g/1000/800?image=1069) center/cover,
    url(https://picsum.photos/1000/800?image=1069) center/cover;
  background-clip:
    content-box,
    padding-box;
  padding:100px calc(100% - 300px) 100px 50px;
  box-sizing:border-box;
}

<div class="container">
    Some text
</div>

Answer 2

您可以使用mix-blend-mode，尽管它会影响.content div的所有内容。

.container {
  height: 300px;
  background: url(https://picsum.photos/1000/800?image2045) center/cover;
  padding: 50px;
}

.content {
  width: 220px;
  height: 180px;
  background: white;
  mix-blend-mode: difference;
  box-sizing: border-box;
}

<div class="container">
  <div class="content"></div>
</div>