如何截断/剪切位于其下方的文本形状的div？

Question

我想截断文本形状中的div而不是截断div中的文本。因此，当div被截断时，位于其下方的文本部分将变为黑色的白色。是否有任何财产可以让div成为其下的文字形状？或者是否有任何其他解决方案可以提供相同的结果？ 我的代码如下：

body{
	background:green;
	color:#000;
	text-align:center;
	padding:30px; 
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size:25px;
}
#wrap{position:relative;}
#text{
	position:absolute;
}
#slider{
	position:absolute;
	height:50px;
	width:50px;
	border-radius:100%;
	background:white;
	/*visibility:hidden;*/
	text-overflow:clip;
	
}

<br/><br/><br/>
	<div id="wrap">	
		<div id="text">Text lying below the div!</div>
		<div id="slider"></div>
	</div>	
		

Answer 1

我认为你正在寻找for this effect。不是动画一，是文本背景剪辑的东西。它有一个tutorial来创建这种效果。 还有一个教程如何执行此操作cross browser。 Another way to do it