Question

我有两个画布。其中一个是房间的照片，另一个是椅子的照片。我有两个问题：第一：如何将这两个画布相互叠加？二：我的第一个包含房间图像的画布宽约7米，椅子宽约80厘米。这样的方式不是图像的大小。它的大小是我应该如何根据第一个放第二个？

由于

Answer 1

我不确定你为什么继续引用＆＃34;画布＆＃34;我只能在你可以使用图片的时候看到为什么你需要画布，但是你可以在父元素上使用position: relative;，然后在你的子元素上使用position: absolute;，例如：

<div class="canvas">
    <img class="canvas__item" src="images/room.jpg" alt="The room">
    <img class="canvas__item  canvas__item--chair" src="images/chair.jpg" alt="The chair">
</div>

或者如果使用<canvas>元素（在您的问题中没有任何代码我无法分辨）：

<div class="canvas">
    <canvas class="canvas__item  canvas__item--room"></canvas>
    <canvas class="canvas__item  canvas__item--chair"></canvas>
</div>

在你的CSS中：

.canvas {
    position: relative;
    width: 720px; /* Define the width of your main image, in your case the "room" */
    height: 460px; /* Define the height of your main image, in your case the "room" */
}

.canvas__item {
    position: absolute;
}    

.canvas__item--room {
    top: 0;
    left: 0;
}

.canvas__item--chair {
    top: 10px; /* Define the offset position of your chair image here */
    left: 80px; /* Define the offset position of your chair image here */
    width: 60px; /* Define the width of your chair image here */
    height: 180px; /* Define the height of your chair image here */
}

如何将两个带有图像的画布放在一起

1 个答案: