通过选中复选框选项在 Web 应用程序中显示多张图片

Question

我正在创建一个基于Web(HTML，CSS，Javascript，VueJs(的解剖工具。我有一个身体部位清单作为清单。我还有一个身体图像，当点击清单时，它会将其器官添加到其中。

例如，如果您单击清单上的"左手"选项，则左手将被添加到身体图片中。

现在我想知道：

1-如何将身体部位图片放在我希望它们的位置和角度。

2-如何设置代码，以便通过单击清单将相应的身体部分添加到身体图像中？

Answer 1

您可以绝对定位图像 - 如果图像是具有透明背景的 png 文件，您可以旋转它们以使它们适合页面上您需要的任何位置，它们将无缝显示。你可以只用css来做这整件事。如果没有示例，就很难给您一个明确的答案，但是如果您从该项目开始，使其位于页面上方

position: absolute;
top:-400px;

然后，一旦选中该复选框，您就可以切换类，新类可以具有诸如 -

position: absolute;
top: 37px;
left: 283px;
transform: rotate(20deg);

Answer 2

将全身图片分成更小的部分，并用网格系统排列。例如，将图片分成 9*12 块，并在单击清单时显示/隐藏图片。