如何在图像上最佳地叠加画布？

Question

我想在页面上的图像上放置画布。画布将是图像的精确尺寸。

但是，必须满足以下条件：

• 画布必须始终在图像顶部完全。因此，使用绝对定位将不起作用，因为如果内容插入到图像上方，它将向下移动图像而不移动画布。
• 图像可以从其原始大小调整大小。因此，用画布替换图像并将其背景设置为图像将不起作用。

我有哪些选择？

Answer 1

您应该能够使用position:relative而不是绝对的第一个要求。

对于第二个我猜测你可以把图像和画布放在一个跨度内。画布的宽度/高度为100％，并且会在调整图像大小时调整大小，因为div的大小会更改以适合图像。

编辑：实际上我不确定position:relative会起作用。但我相信如果你使用position:absolute并且父元素有position:relative，那么绝对位置将相对于父元素。