制作 Div 蒙版背景图像以匹配父背景图像

Question

我正在尝试实现一种效果，看起来 "container" div 正在反转 "parent" div 的背景图像。根据我的研究，除了 "parent" 和 "container" 大小相同但背景不同，以及 "content" div 掩盖 "container" div。这是我希望它看起来像的图片。

这是我的 HTML:

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

"parent" div 具有正常背景，而 "container" div（与 "parent" 大小相同）具有倒置版本的 "parent" 背景（通过第三方程序反转，我不是想通过 css 反转）。

我的问题是，我需要将什么 CSS 应用到 "content" 和 "container" div 以实现 "container" div 的背景仅通过 "content" 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>

制作 Div 蒙版背景图像以匹配父背景图像

Make Div Mask Background Image to Match Parent Background Image

html

css

mask

background-image