如何最好地覆盖在图像上的画布？ [英] How to best overlay a canvas on an image?

问题描述

我想在页面上的图片上放置一个画布。

I would like to place a canvas on top of an image that I have on a page. The canvas will be the exact dimensions of the image.

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

However, the following conditions must be met:

• 画布必须始终保持正确在图片顶部。因此，使用绝对定位将不起作用，因为如果内容被插入在图像上方，则它将在不移动画布的情况下向下移动图像。


• 从原始大小调整大小。因此，使用画布替换图片并将其背景设置为图片将无法使用。

• The canvas must remain exactly on top of the image at all times. Therefore, using absolute positioning will not work because if content is inserted above the image, it will move the image down without moving the canvas.
• The image may be resized from its original size. Therefore, replacing the image with the canvas and setting its background to the image will not work.

我有什么选项？ p>

What options do I have?

推荐答案

您应该能够使用 position：relative 第一要求。

You should be able to use position:relative instead of absolute for your first requirement.

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

For the second I'm guessing you could put both the image and the canvas inside of a span. The canvas would have a width/height of 100% and would be resized as the image resizes because the size of the div would change to fit the image.

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

actually I'm not sure position:relative would work. But I believe if you use position:absolute and the parent element has position:relative, than the absolute positions will be relative to the parent.

这篇关于如何最好地覆盖在图像上的画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！