如何在DIV中打洞（下面的透明元素）

Question

我试图删除部分DIV颜色而不改变它的大小或z-index，这是否只能通过CSS？我做了一个片段来解释我的问题。

所以基本上我有3种不同颜色的3个DIV：

<div id="red">
</div>
<div id="blue">
  <div id="yellow"></div>
</div>

{ 
    type: types.TOGGLE_APP_CLASS, 
    payload: appClass.appClassId
}

我希望能够看到作为背景的红色div的颜色，但只能看到黄色div位于蓝色div上的位置。

因此，你可以看到小提琴的位置是黄色的div位于应该是红色的背景......有什么可能的方法我可以做到这一点？提前致谢！

Answer 1

这是一个简单的解决方案：

• 将“放在一边” DIV overflow:hidden和无背景（是的）
• 向 HOLE 元素
添加巨大的框阴影 模糊半径

/*QuickReset*/*{box-sizing:border-box;margin:0;}html,body{height:100%;}

body{
  background:url(http://i.imgur.com/kQEUAmB.jpg) 50%;
  background-size: cover;
}

#aside{ /* your ex-blue */
  position:fixed;
  overflow:hidden; /* to contain the child's blue box shadow */
  width: 29%;
  height: 100%;
  right: 0;
  top: 0;
  color:#fff;
}

#hole{ /* your ex-yellow... hole... something */
  width: 80%;
  height: 75px;
  box-shadow: 0 0 0 300vh blue;  /* huge blue box shadow */
}

<div id="aside">
  
  <div id="hole">I HAVE BLUE BOX-SHADOW</div>
  
  <p>OTHER CONTENT ON BLUE</p>
  
</div>

Answer 2

你可以使蓝色div透明，然后在其中添加两个div，它们将具有蓝色背景，因此它看起来是原始蓝色背景上的凹痕（并且不使用GPU来计算阴影，从而节省电池电量移动设备在大量使用时）：

#out {
  position: relative;
}
#red {
  height: 400px;
  width: 100%;
  background-color: rgba(255, 0, 0, 0.3);
  position: relative;
  top: 0px;
}
#blue {
  width: 29%;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0;
}
#blue1{
  position: absolute;
  left: 80%;
  top: 0;
  width: 20%;
  height: 100%;
  background: blue;
}
#blue2{
  position: absolute;
  left: 0;
  top: 75px;
  width: 100%;
  height: calc( 100% - 75px );
  background: blue;
}
#yellow {
  width: 80%;
  height: 75px;
}

<div id="out">
  <div id="red">
  </div>
  <div id="blue">
    <div id="yellow">this is content</div>
    <div id="blue1"></div>
    <div id="blue2"></div>
  </div>
</div>