如何最好地在图像上覆盖画布？

Question

我想在页面上的图像上方放置一个画布。画布将是图像的确切尺寸。

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

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

我有什么选择？

Answer 1

您应该能够使用 position:relative 而不是 absolute 来满足您的第一个要求。

第二个我猜你可以把图像和画布放在一个跨度内。画布的宽度/高度为 100%，并且会随着图像大小的调整而调整大小，因为 div 的大小会改变以适应图像。

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