html - 制作 Div mask 背景图像以匹配父背景图像

Question

我正在尝试实现一种效果，看起来“容器”div 正在反转“父”div 的背景图像。从我的研究中，除了“父级”和“容器”大小相同但背景不同，以及“内容”div 掩盖“容器”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>