別の画像の上に1〜5枚の画像を配置するにはどうすればよいですか？

Question

プログラムのユーザーが1つから5つの画像を選択するので、私はこれらの画像を下に示すように別の画像の上に置きたいと思います。背景のイメージは、明るいグレーの1つの長いイメージで、上の1つ〜5つは黒です。

私は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> 

事前に おかげで、このような

Answer 1

何か....私は、CSSファイルへのアクセス権を持っていけないので、CSSはインラインでなければなりませんか？

$('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

これを見て、それはあなたが探しているものだかどうかを確認：

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

.grey100 { 
 
    
 
      opacity: 0.5; 
 
} 
 

 
img{ 
 
width:100px; 
 
}

<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>