在opaque div上创建透明div

Question

我有3个div：

• 主要的div是绿色=＆gt; DIV1
• 在主要内部我有不透明的红色div =＆gt; DIV2
• 在红色div中，我有一个最后的div =＆gt; 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。

Answer 2

这可能是一个简单的解决方法。检查它是否适用于您的目的：

div {
  background-image: url(http://placekitten.com/1200/800);
  height: 100vh;
  width: 100vw;
}

div > div {
  background: transparent;
  border: 60px solid rgba(200, 0, 0, .9);
  position: absolute;
  width: 30%;
  height: 30%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div><div></div></div>