时间戳

首页 > 解决方案 > 有没有办法使用 CSS 创建蒙版（正文中的示例图像）

css - 有没有办法使用 CSS 创建蒙版（正文中的示例图像）

问题描述

演示我需要的示例图像

如果您看到上面的图像，则有一个父容器应用了一个渐变的背景图像。它分为垂直堆叠的 2 个细分。其中一个 div 包含一个绝对定位的红色 div 和一个蓝色 div。蓝色 div 应该像一个只覆盖 subdiv2 内容的掩码。它锚定到 subdiv2 中的其他东西（不在图像中），因此如果“某物”移动，它就会移动。如果它恰好覆盖了红色div，它应该在保留渐变背景的同时隐藏红色div。有没有办法使用css来实现这一点？

如果渐变不存在，One 将沿链继承背景颜色，蓝色 div 将简单地隐藏红色 div。如果您继承背景图像，我们会在 2 个细分中得到一个不正确的分割渐变。如果我们保持 2 个细分的背景透明，我不知道蓝色 div 无法隐藏红色 div。

谢谢！

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

标签： csssass

解决方案

如果父 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>

推荐阅读