制作 div 蒙版背景图像以匹配父背景图像答案

【问题标题】：Make Div Mask Background Image to Match Parent Background Image制作 div 蒙版背景图像以匹配父背景图像
【发布时间】：2019-03-10 10:51:22
【问题描述】：

我正在尝试实现一种效果，看起来“容器”div 正在反转“父”div 的背景图像。根据我的研究，除了“父”和“容器”大小相同但背景不同，以及“内容”div 掩盖“容器”div 之外，我似乎找不到其他方法。这是我希望它看起来像的图像。

这是我的 HTML：

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

“父” div 具有普通背景，而“容器” div（与“父”大小相同）具有“父”背景的反转版本（通过第三方程序反转，我不想反转它通过css）。

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

【问题讨论】：

invert color using css的可能重复
我不想通过 css 反转。我正在尝试掩盖

标签： html css background-image mask

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：