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

Question

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

Answer 1

Box shadow支持几乎所有现代浏览器，所以，你可以这样做你想做的事情（我希望，我理解你的正确）：

HTML：

<div class="hole"></div>

的CSS：

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

因此，该块将是透明的，并且它周围的所有阴影都会被高亮显示。

示例：http://codepen.io/anon/pen/ultKh

Answer 2

一种新的解决方法，使用混合模式，支持border-radius，多个元素......但不支持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>

Answer 3

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

所以，一个容器div，没有应用/小样式。

然后一组4'边框'div应用于它们，使中心区域透明。

Answer 4

您可以使用带有Alpha通道透明度的png作为div的背景图片。

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

Answer 5

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

Demo

Answer 6

发现它！

1. 父级div具有相对位置，透明背景和 隐藏溢出。
2. 绝对位置的儿童div，有色， 超大边框填充父母的背景，和 透明的背景。

洞将由一个透明的孩子组成，边界如此之大，填满了父母的背景。孩子的定位将取决于边界的大小。将背景设置为父项后面的背景，它将显示！

在这个例子中，您可以通过黄色 faux 背景（实际上是一个巨大的边框）看到红色。

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

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

您怎么看？

Answer 7

有一种方法，虽然它只能做大多数矩形边框，并带有以下标记作为演示：

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或{{1相当于，遗憾地）。

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

Answer 8

更大的问题实际上并不是你想要透过的元素的背景（它只是背景颜色：透明），而是它的祖先元素。例如，如果其包含元素具有白色背景，则具有背景颜色：透明的div仍然看起来好像具有白色背景。最好的方法是在页面的较低级别定义背景颜色。例如，如果你想通过div＃see-through看看它是div #content的子节点，它位于div＃header和div＃footer之间，你可以给#header和#footer背景颜色，但是将#content定义为透明。然后将背景颜色分配给＃see-through的各个兄弟元素。还有一件事：在定义透明元素时，甚至透明元素都可以有“彩色”边框，这可能会有所帮助，这意味着您可以在不添加额外元素的情况下进入中间点。

Answer 9

如果您使用iframe，我真正想到的最好的事情就是我想出来的 它可能是“镜头”，可以看到你想要的任何东西，但当然它不像真正的镜头那样工作但接近