Html 如何在DIV中创建孔？

假设我有以下HTML结构：

<canvas></canvas>
<div class="overLay">
    <button>Click me!</button>
</div>

不起作用，因为它只是显示它后面的白色背景。关于如何达到这个效果有什么想法吗

---

这可能被标记为的潜在副本的问题无法解释按钮可能具有边界半径等属性，并且无法提供合适的解决方案。

无法在HTML元素内创建孔。透明背景只能应用于不从具有非透明背景的父元素派生的元素

你能做的，虽然有点复杂，但就是在你的按钮周围创建div，和兄弟姐妹在同一级别。给那些div一个白色的背景，然后你的透明按钮就可以工作了

< >我使用表格布局创建了一个示例，其中按钮位于中间单元格的中间行中。请参见按钮显示画布背景色：

画布{
宽度：200px；
高度：200px；
背景：紫色；
位置：绝对位置；
z指数：-1；
}
.覆盖{
宽度：200px；
高度：200px；
显示：表格；
}
.覆盖按钮{
背景色：透明；
空白：nowrap；
}
.overLay>div{
显示：表格行；
}
.overLay>.middle{
高度：1px；
}
.overLay>div>div{
显示：表格单元格；
文本对齐：居中；
}
.overLay>.middle>分区：第n个子项（2）{
宽度：1px；
}
/*现在，在按钮周围的div上设置背景*/
.顶部、.左侧、.右侧、.底部{
背景：白色；
}

点击我！

因为在我最初的回答中，您指出了使用边界半径的意图。因此，有另一种方法使这成为可能

基于

使用渐变半径背景创建覆盖，该背景会在按钮所需位置创建渐变色心，大小与按钮相同。使外部颜色为

白色

，内部颜色为

透明

然后，设置按钮的位置。（我是通过在表格布局中将其居中来实现的）：


画布{
宽度：200px；
高度：200px；
背景：紫色；
位置：绝对位置；
z指数：-1；
}
.覆盖{
宽度：200px；
高度：200px；
显示：表格；
背景色：白色；
背景：-webkit径向梯度（50%50%，圆形，透明25px，白色0px）；
背景：径向梯度（50%50%，圆形，透明25px，白色0px）；
}
.overLay>div{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
钮扣{
背景色：透明；
边界半径：50%；
宽度：50px；
高度：50px；
位置：相对位置；
}

点击我！
Mmm…，您是否考虑过使用带掩码的SVG元素。这应该能奏效。看一下这个片段


正文{
填充：0；
保证金：0；
}
.你的画布{
位置：绝对位置；
排名：0；
左：0；
z指数：-1；
}
钮扣{
宽度：150px；
高度：100px；
背景色：透明；
颜色：白色；
光标：指针；
}

点击我
你可以…


将画布元素减小为按钮大小（=按钮画布！）
使用CSS根据需要将按钮画布定位到div上
在画布上添加单击事件侦听器
在按钮画布上绘制所需的任何设计

这样，您就可以完全灵活地使用canvas元素提供的惊人的绘图工具

以下是示例代码和（奇特的）演示。

虽然此演示只是为了好玩，但您可以轻松地重新设计此示例并将其转换为可重用的小部件：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var宽度=80；
var高度=40；
var-borderwidth=4；
var x=0；
var y=0；
x+=边界宽度；
y+=边框宽度/2；
var w=宽度边界宽度边界宽度；
var h=高度和宽度；
var深度=5；
//
var停止计数=8；
var角=0；
var角增量=360；
//
var labelColor='black'；
画布。宽度=宽度；
画布。高度=高度；
请求动画帧（动画）；
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseUp（e）；}）；
函数makeGradient（）{
var g=ctx.createLinearGradient（0,0，cw，0）；
对于（var i=0；我能做一个JSFIDLE吗？显示div和按钮的css…所以你基本上希望你的
在你的
.overLay
中创建一个“窗口”？如果我理解正确，这是做不到的…你不是在寻找一个透明的背景，你是在寻找一个“洞”在parentCorrect中，我想在parentCorrect上打一个洞这几乎可以，但问题是它打破了边界半径之类的东西我现在离我的电脑不远，但使用非圆形按钮（仅圆角、直边）可以吗？我以前没有使用过径向渐变。如果是的话，不用担心另一个例子，我可以找到如何使用它，只是想知道。这看起来确实是我想要的。很抱歉，但这种方法只适用于一个圆……除此之外，你最好的拍摄方法是为叠加创建一个白色、透明的有洞的png背景，然后将按钮准确放置在点上方…一种类似但更好的技术是使用框阴影。使用此技术的原始问题（标记为dup的问题）中有一个答案，它可以处理任何边界半径设置。这将是完美的，但我需要按钮位于div中。不过这不是一个坏主意
background-color:rgba(0,0,0,0);