html - 如何在 DIV 中创建一个洞？

Question

<分区>

Answer 1

没有办法在 HTML 元素中创建一个洞。透明背景只能应用于不是来自具有非透明背景的父级的元素。

您可以做的是在您的按钮周围创建与 sibling 处于同一级别的 div，认为这有点复杂。给那些 div 一个白色背景，然后你的透明按钮应该可以工作。

我使用表格布局创建了一个示例，其中按钮保留在中间行的中心单元格中。看到按钮显示 Canvas 背景颜色:

canvas {
    width: 200px;
    height: 200px;
    background: purple;
    position: absolute;
    z-index: -1;
}

.overLay {
    width: 200px;
    height: 200px;
    display: table;
}

.overLay button {
    background-color: Transparent;
    white-space: nowrap;
}

.overLay > div {
    display: table-row;
}

.overLay > .middle {
    height: 1px;
}

.overLay > div > div {
    display: table-cell;
    text-align: center;
}

.overLay > .middle > div:nth-child(2) {
    width: 1px;
}

/* Now, set the background on the divs around the button */
.top, .left, .right, .bottom {
    background: white;
}

<canvas></canvas>
<div class="overLay">
    <div class="top">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="middle">
        <div class="left"></div>
        <div>
            <button>Click me!</button>
        </div>
        <div class="right"></div>
    </div>
    <div class="bottom">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>