在 <div> 元素中创建一个洞

Question

div 中的孔的 定义 - 一种元素或一种方法，您可以通过它显示背景，仅针对特定区域，在 <div> 元素的内容后面。

原文由 Sussagittikasusa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更大的问题实际上不是您想看穿的元素的背景（这只是背景颜色：透明），而是它的祖先元素。例如，具有 background-color: transparent 的 div 如果它的包含元素有白色背景，它仍然看起来像有白色背景。最好的方法是在页面的较低级别定义背景颜色。例如，如果你想看穿 div#see-through 并且它是 div#header 和 div#footer 之间的 div#content 的子级，你可以给#header 和#footer 背景色，但将#content 定义为透明.然后将背景颜色分配给#see-through 的各个同级元素。还有一件事：在定义透明元素时记住即使透明元素也可以有“彩色”边框可能会有所帮助，这意味着您可以在不添加额外元素的情况下到达中间点。

原文由 DavidH 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

几乎所有现代浏览器都支持 CSS box-shadow ，所以你可以这样做你想做的事（我希望，我理解你是对的）：

 body {
  margin: 0;
  padding: 0;
}

.hole {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
}

 <img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Fox_Head.jpg" alt="" style="width: 100%;">
<div class="hole"></div>

因此，该块将是透明的，并且它周围的所有区域都将用它的阴影突出显示。

原文由 equinox 发布，翻译遵循 CC BY-SA 4.0 许可协议