HTML/CSS：在画布上覆盖一个空的 div答案

【问题标题】：HTML/CSS: Overlay an empty div over a canvasHTML/CSS：在画布上覆盖一个空的 div
【发布时间】：2018-08-20 09:43:31
【问题描述】：

我想在画布上覆盖一个空 div 以创建某种晕影效果。

现在由于某种原因，小插图 div 根本不可见。如果我在 vingette div 中放置一些文本，它就会变得可见，但前提是我还从 vignette 类中删除了 height 属性。

有没有办法在画布顶部显示空 div 并将其高度和宽度缩放到 100%？

到目前为止我的代码：

.container {
    position: relative;
}

.container canvas,
.vignette {
    position: absolute;
    height: 100%;
    width: 100%;
}

.vignette {
    background: radial-gradient(circle, transparent 50%, black 150%);

    <div class="container">
        <canvas id="game-screen"></canvas>
        <div class="vignette"></div>
    </div

【问题讨论】：

您的容器没有任何高度，因为您绝对定位了它的所有子项。 100% 的零仍然是零。

标签： html canvas

【解决方案1】：

你应该插入

html, body {
  height: 100%;
}

对于.container 添加：

.container {
    position: relative;
    width: 100%;
    height: 100%;
}

html, body {
  height: 100%;
}
.container {
    position: relative;
    width: 100%;
    height: 100%;
}

.container canvas,
.vignette {
    position: absolute;
    height: 100%;
    width: 100%;
}

.vignette {
    background: radial-gradient(circle, transparent 50%, black 150%);

<div class="container">
        <canvas id="game-screen"></canvas>
        <div class="vignette"></div>
    </div

【讨论】：