首页 文章

在opaque div上创建透明div

提问于
浏览 次
-1

我有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）的不透明度 .

可能吗 ？

EDIT 1 ：这样的事情：

enter image description here

EDIT 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;
html css

2 回答

  • 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的信息 .

    回复于
  • 1

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

    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>
    回复于

相关问题