Question

Example image demonstrating what I need

如果您看到上面的图像，则有一个父容器具有应用的背景图像，该背景图像是渐变的。它分为2个垂直细分的细分。这些div之一包含绝对定位的红色div和蓝色div。蓝色div应该像蒙版一样，仅覆盖subdiv2的内容。它锚定到subdiv2中的其他位置（不在图像中），因此如果该“东西”移动了，它就会移动。如果它恰好覆盖了红色div，则应该在保留渐变背景的同时隐藏红色div。是否有办法使用CSS实现此目的？

如果不存在渐变，则将沿链继承背景颜色，而蓝色div将仅隐藏红色div。如果您继承背景图片，我们会在2个细分中获得不正确的分割渐变。如果我们保持2个细分的背景透明，那么我就不会知道蓝色div隐藏红色div的方法。

谢谢！

编辑：很抱歉，没有更早指定。我的错。我更改了措辞，以确保你们了解蓝色div始终不会覆盖红色div的事实，否则解决方案将很简单。

Answer 1

You can check this example out. 您可以使用

background: inherit

将红色div的z索引设置为-1后，在蓝色div上

。

在蓝色div上使用背景继承将有助于其不会失去透明度，并且会消失红色div。在红色div上使用z-index：-1会将其推到蓝色div后面。

Answer 2

如果父div具有background:transparent，它将为您带来所需的效果。困难的部分是让父母“站在”孩子的前面。我可以通过为孩子设置负数z-index来做到这一点，但是您可能还需要其他一些方法。没有看到您的标记，我不确定。

document.getElementById('toggle').onclick = () => {
  const inner = document.getElementById('inner');
  const style = window.getComputedStyle(inner);
  const index = style.getPropertyValue('z-index');
  document.getElementById('inner').style.zIndex = index === "-1" ? "0" : "-1";
}

.bg {
  width:600px;
  height:400px;
  background:url(http://placekitten.com/600/400);
}

.div1 {
  height:200px;
  border: 2px solid red;
}

.div2 {
  position:relative;
}

.subdiv2 {
  position:absolute;
  left:40%;
  top:80px;
  height:80px;
  width:200px;
  border: 2px solid blue;
  background:transparent;
}

#inner {
  position:absolute;
  top:10px;
  left:80px;
  width:60px;
  height:60px;
  background:red;
  z-index:-1;
}

<div class="bg">
  <div class="div1"></div>
  <div class="div2">
    <div class="subdiv2">
      <div id="inner"></div>
    </div>
  </div>
</div>
<button id="toggle">toggle z-index</button>

Answer 3

z-index似乎是解决此问题的糟糕方法。您可以为z-index值设置动画，但是当元素更改深度并在彼此之间传递时，它仍然看起来有点可笑。

如果目标是在视觉上“隐藏”其父级背景的内容，透明性不是相同的结果吗？还是我在目标上缺少一些东西？

我建议：

// hidden state
.redDiv {
 opacity:0;
 transition: opacity 0.5s linear;
}

// visible state
.redDiv.visibleState {
 opacity:1;
}

您可以做real masking in CSS，但我倾向于将其保留用于复杂形状。

有没有一种方法可以使用CSS创建蒙版（正文中的示例图像）

3 个答案: