html - 在不透明的 div 上创建一个透明的 div

Question

我有 3 个 div:

• 主要的 div 是绿色 => DIV1
• 在主体内部我有不透明的红色 div => DIV2
• 在红色的 div 里面，我有一个最终的 div => DIV3

我希望最后一个 div (DIV3) 是完全透明的，以便它显示绿色 (DIV1)，就像红色 div (DIV2) 中的一个“洞”。

body,
html {
  width: 100%;
  height: 100%;
}

#div1 {
  background: rgb(0, 255, 0);
  width: 100%;
  height: 100%;
}

#div2 {
  background: rgba(255, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

#div3 {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  background: rgba(0, 0, 255, 0.5);
}

<div id="div1">
  <div id="div2">
    <div id="div3">
    </div>
  </div>
</div>

基本上，最终的 div (DIV3) 将完全“取消”红色父 div (DIV2) 的不透明度。

这可能吗？

编辑 1:像这样的东西:

编辑 2:

这样的方法可行，但我需要在每次调整大小时通过 js 手动设置宽度，以便正确覆盖屏幕:

position: absolute;
border: solid rgba(255,0,0,0.5);
border-top-width: 50px;
border-bottom-width: 50px;
border-left-width: 50px;
border-right-width: 50px;

Answer 1

使用mix-blend-mode 属性。此属性用于指定混合元素及其背景的混合模式。

背景是元素背后的内容(称为源元素)，也是元素的合成内容。目标元素是位于源元素后面且源元素与之重叠的元素。背景是在源和目标之间进行颜色混合的区域。

这是针对您的问题的解决方案片段。

.destination {
	width: 250px;
	height: 250px;
	background: blue;  /*Change the background color to change the color inside the BOX*/
}

.backdrop {
	position: relative;
	left: 10px;
	top: 10px;
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-color: white;
	mix-blend-mode: hard-light;
}

.source {
	width: 80px;
	height: 80px;
	margin: 10px;
	background-color: gray;
  text-align: center;
}

<div class="destination">
	<div class="backdrop">
		<div class="source">BOX</div>
	</div>
</div>

您可以阅读有关mix-blend-mode的更多信息here .