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

Question

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

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

但是当我选择多个图像时，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必须是内联的.... 提前致谢

Answer 1

这样的事情？

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div').removeClass("grey100");
    } else {
        $('div').addClass("grey100");
    }
});

.grey100 {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
            
            opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='grey100'>
<img src="https://res.cloudinary.com/rss81/image/upload/gw.jpg">
<input type="checkbox" > 
</div>

Answer 2

看看这个，看看它是否适合您：

＆＃13;

＆＃13;

$('input:checkbox').change(function() {
  $(this).parent().find('img').toggleClass("grey100");
});

＆＃13;

.grey100 {
    
            opacity: 0.5;
}

img{
width:100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div >
   <table>
      <tr>
         <td>
            <img class='grey100'src="https://res.cloudinary.com/rss81/image/upload/gw.jpg"><br>
            <input type="checkbox"  >
         </td>
         <td >
            <img class='grey100'src="https://res.cloudinary.com/rss81/image/upload/gw.jpg"><br>
            <input type="checkbox"   >
         </td>
      </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;