在响应式 div 中将文本定位在 canvas 上

Question

这个问题已被部分提问和回答，但我似乎无法找到完整的答案。我在 bootstrap 中有一个响应式 div，并且我 (1) 希望我的 canvas 以相同的位置和尺寸显示，并且 (2) 希望我的文本出现在 canvas.

<div class="col-md-9 content-wrapper>
    <canvas id="canvas" resize="true"></canvas>
    <p class="statement">Display this text over canvas</p>
</div>

css:

.statement{
     position:relative;
     top:50%;
     transform: translateY(-50%);
} 

#canvas{
     width:100%; height:100%;
}

有什么建议吗？我知道我需要 canvas 上的某种位置 css，但我不知道是什么，绝对定位会给我带来响应方面的问题。我也想远离额外的 javascript 定位，但如果有人可以解释一种不会让它出现问题的方法，我会接受这个建议。

谢谢！

Answer 1

你的地方

position: relative;

在后台div。

放置

Position: absolute;

在前台 div 和 top, bottom, left, right 的位置。前景容器将相对于背景工作，这意味着它是响应式的，如果您使用 %

设置前景的宽度

在响应式 div 中将文本定位在 canvas 上

Positioning text over a canvas in a responsive div

html

css

canvas

responsive