Html 如何在另一个图像上放置1到5个图像？

当一个程序的用户从一个到五个图像中进行选择时，我希望将这些图像放置在另一个图像的顶部，如下所示。背景中的图像是一个浅灰色的长图像，顶部的一到五个图像是黑色的

当我添加五个图像中的任何一个时，顶部的图像放置正确

但当我选择多个图像时，2-3-4-5图像的位置不正确：

这是我的代码，图像放在html表格单元格中

<td><img src="backgroundimg.gif">
<img src="img1.gif" style="right:333;position:relative;z-index: 1;">
<img src="img2.gif" style="right:214;position:relative;z-index: 1;">
<img src="img2.gif" style="right:154;position:relative;z-index: 1;">
<img src="img2.gif" style="right:95;position:relative;z-index: 1;">
</td>

我没有访问css文件的权限，所以css必须是内联的。。。。 提前谢谢诸如此类的事

$（'input:checkbox'）。更改（函数（）{
如果（$（this）.is（“：checked”））{
$（'div'）.removeClass（“灰色100”）；
}否则{
$（'div'）.addClass（“灰色100”）；
}
});
.grey100{
-webkit过滤器：灰度（100%）；
-moz滤波器：灰度（100%）；
-o-过滤器：灰度（100%）；
-ms过滤器：灰度（100%）；
滤镜：灰度（100%）；
不透明度：0.5；
}
看看这个，看看它是否就是你想要的：


$（'input:checkbox'）。更改（函数（）{
$（this.parent（）.find（'img'）.toggleClass（“grey100”）；
});
.grey100{
不透明度：0.5；
}
img{
宽度：100px；
}





你的问题不是很清楚。你能提供一个你所拥有的工作片段和你想要的更好的解释吗？我试试看：程序的用户选择一到六个选项（复选框），或者一个，或者全部六个，然后生成一个html代码，用户的选择显示为灰色“背景”上方的黑色图像图像是一种以图形方式向用户显示所做选择的方式。我认为现在发生的事情是，第一个图像被正确放置，但是后一个图像被放置在与第一个黑色图像相关的位置，导致它们出现在错误的位置……比如灰显的图像，当点击它们时会变暗？或者有两组图像都开始变灰，当点击顶部图像时，底部图像变暗？或者您是否只有6个复选框，当选中它们时，会显示所有图像的图像，但选中的图像较暗？如果未选中任何复选框，则仅显示灰显图像。当用户选中这些复选框时，新图像将显示在灰显图像的顶部。这些是较小的黑色图像。谢谢你的耐心：）好的，这是有道理的。你能用js吗？谢谢你的回答，我现在明白我不清楚的地方了。对此我很抱歉。我有一个python gui，我的文本编写者在其中键入产品文本，并生成一个html代码，用于我的网站。生成html代码时，它会检查复选框是否已选中，如果已选中，则会将黑色小图像放置在灰色图像的顶部。每个黑色图像必须有一个基于灰色图像的绝对位置，因为站点是响应的。到目前为止，如果选中一个框，黑色图像将正确放置，但如果选中多个框。后面的黑色图像放置错误，为什么不改变图像的不透明度，不下载并覆盖图像就可以做同样的事情呢？这可能会奏效，我愿意尝试一切。到目前为止，代码中第一个黑色图像的图像似乎放置正确，但后面的图像以某种方式与第一个图像相关。我也可以为每个可能的选项添加一个单独的图像，但由于用户可以按任意顺序或数字选择1-2-3-4或5个图像，这将创建很多我认为是不必要的代码。我怎样才能用ocpacity解决它？