css - 如何使用CSS将div的 'clip away'部分？

Question

这或多或少是一个 scaled down version of what I got ，但这不是我想要的，因为我希望绿色 div 部分透明，所以我将能够看到这两个 div 背后的任何内容(示例中没有，但我的元素中有) .但是另一个 div 挡住了我的视线，那么我该如何“剪掉”那个 div 的一部分呢？

想一想，也许还有更好的方法来解决这个问题。

以防万一链接断开:

HTML:

<div id="foregrounddiv2"></div>
<div id="foregrounddiv"></div>​

CSS:

#foregrounddiv2 {
  background-color:grey;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index:2;
}
#foregrounddiv {
  background-color: green;  
  position: fixed;
  z-index: 3;  
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}  

更新:对于造成的误解，我们深表歉意。我所说的文本位于两个 div 的后面。也对糟糕的命名感到抱歉。我不希望 #foregrounddiv2 div 有任何不透明度，我只是希望能够通过 #foregrounddiv 看到内容。希望我说得有道理。

Answer 1

你要的是灰色div上打个洞，那个洞在绿色div的位置？

如果是这样，你不能直接这样做，你必须制作 4 个灰色 div 并安排它们的位置以在屏幕上“留下”一个洞。