Question

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

现在出于某种原因，晕影div根本不可见。如果我在vingette div中放置一些文本，它会变得可见，但只有，如果我也从vignette类中删除了height属性。

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

到目前为止我的代码：

＆＃13;

.container {
    position: relative;
}

.container canvas,
.vignette {
    position: absolute;
    height: 100%;
    width: 100%;
}

.vignette {
    background: radial-gradient(circle, transparent 50%, black 150%);

＆＃13;

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

＆＃13;

Answer 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

HTML / CSS：在画布上叠加空div

1 个答案: