几乎所有现代浏览器都支持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>

因此，该块将是透明的，它周围的所有部分都将用其阴影高亮显示。

一个新的方法来解决这个问题，使用混合模式，并支持边界半径，多元素...但在IE中没有支持

.back {
	background-color: lightblue;
	width: 400px;
	height: 300px;
	background-image: repeating-linear-gradient(45deg, white 0px,lightblue 40px);
}

.base {
	position: relative;
	left: 10px;
	top: 10px;
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-color: white;
	mix-blend-mode: hard-light;
}

.hole {
	width: 80px;
	height: 50px;
	margin: 10px;
	border: solid 1px red;	
	border-radius: 10px;
	background-color: gray;
}

<div class="back">
	<div class="base">
		<div class="hole">ONE</div>
		<div class="hole">TWO</div>
	</div>
</div>

您可以按以下格式构造一组帧div：

因此，只有一个容器div，没有/很少应用样式。

然后是一组应用了样式的4个“边框”div，使中心区域保持透明。

找到了！

1.具有相对位置、透明背景和隐藏溢出的父div。
1.带有绝对位置的子div，带有彩色的超大边框来填充父级的背景，透明的背景。

这个洞将由一个透明的孩子组成，边框如此之大，以至于填满了父母的背景。子对象的位置将取决于边框的大小。为父母的后面设置一个背景，它就会显示出来！

在本例中，您可以通过黄色人造背景看到红色(这实际上是一个巨大的边框)。

# parent{overflow:hidden; position:relative;}

# child {position:absolute; border:9000px yellow solid; top:0; left:0;}

http://jsfiddle.net/CarambaMoreno/UrbhS/

你认为如何？

您可以使用具有Alpha通道透明度的PNG作为div的背景图像。

<div style="background-image:url(pngwithtransparentarea.png);width:100px;height:100px;">
</div>

我在代码笔上设计了一些我认为你正在寻找的东西。我也在找同样的.找不到任何东西，所以这就是我做的

Demo

有一种方法，尽管它只能处理大多数矩形边框，但以下标记是一个演示：

html：

<div id="wrap">
    <div id="frame">
    </div>
    <img src="http://farm3.static.flickr.com/2232/2299184911_ea1091968b_z.jpg?zz=1" />
</div>

css：

# wrap {

    overflow: hidden;
    position: relative;
}

# frame {

    border: 60px solid #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.5);
}

Demo at JS Fiddle。

虽然没有办法在div上真正“切割”一个洞，但可以使用-webkit-mask-box-image将面具直接应用到图像上。尽管据我所知，这只适用于Webkit浏览器(我知道它是-webkit供应商前缀的属性，但遗憾的是，我不相信有-moz或-o等效项)。

Demo using the above, -webkit-mask-box-image property, at JS Fiddle。

更大的问题实际上不是您想要看到的元素的背景(只需背景颜色：透明)，而是它的祖先元素。例如，如果包含的元素为白色背景，则具有Backging-COLOR：Transactive的div仍将看起来像是白色背景。因此，最好的方法是在页面的较低级别定义背景颜色。例如，如果您想要看透div#透明，并且它是div#内容的子级，位于div#Header和div#Footer之间，您可以给#Header和#Footer设置背景颜色，但将#Content定义为透明。然后将背景颜色分配给#透明的各个兄弟元素。还有一件事：在定义透明元素时，记住即使是透明元素也可以有“彩色”边框，这可能会很有帮助，这意味着您可以在不添加额外元素的情况下进入中间区域。

经过认真考虑，我能想到的最好的办法是，如果你使用iFrame，它可能是一个可以看到你想看的任何东西的“镜头”，但当然它不会像真正的镜头那样工作，而是接近

如果使用svg元素而不是div是可以接受的，则svg提供了使用fill-rule="evenodd"属性进行切割的灵活机制。您可以创建任意形状的任意多个透明区域。

下面是一个将两个正方形切割成灰色正方形的示例(也可以使用as a JSFiddle)：

<img
  src="http://upload.wikimedia.org/wikipedia/commons/5/51/Fox_Head.jpg"
  style="position: absolute; width: 300px;"
>

<svg style="position: absolute; width: 300px; height: 300px;">
<!--
  This `path` element draws 3 squares:
    1. A gray 300x300 square
    2. A transparent 100x100 square
    3. Another transparent 100x100 square

  The key mechanism for creating transparent regions in the shape is
  `fill-rule="evenodd"`. This attribute affects pixel colors in the following
  way. Pick a pixel and draw an infinitely long line in any direction:
    - If the line crosses an odd number of lines, the pixel receives the fill
      color. In this fiddle, the infinite line extending from any gray pixel
      crossed an odd number of lines -- for example, just the line that is the
      perimeter of the gray rectangle.
    - If the line crosses an even number of lines, the pixel is transparent.
      In this fiddle, the infinite line extending from any transparent pixel
      crossed an even number of lines -- for example, the perimeters of the
      transparent square and the gray square.
-->
<path
  fill="grey"
  fill-rule="evenodd"
  d="
    M 0 0
    h 300
    v 300
    h -300
    Z

    M 25 50
    h 100
    v 100
    h -100
    Z

    M 175 50
    h 100
    v 100
    h -100
    Z
  "
/>
</svg>