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

Question

div中Hole的定义- 可以在元素内容后面显示背景的元素或方法,仅用于特定区域<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

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