如何將1到5張圖片放在另一張圖片上？

作爲一個程序的用戶從一個到五個圖像中選擇，我希望這些圖像放置在另一個圖像的頂部，如下所示。背景中的圖像是一個淺灰色的長圖像，頂部的一個圖像是黑色的。如何將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必須內嵌....提前感謝

來源

2017-07-02 Louvre

你的問題是不是真的清楚。你能否提供你所擁有的工作片段，並更好地解釋你想要的東西？ – DCR

生病請嘗試：程序的用戶選擇一到六個選項（複選框），其中一個或全部六個，然後生成一個html代碼，其中用戶選擇在灰色「背景」圖像頂部顯示爲黑色圖像作爲向用戶顯示以圖形方式進行的選擇的一種方式。我認爲現在發生的事情是，第一張圖片放置正確，但後一張圖片與第一張黑色圖片相關，導致它們出現在錯誤的地方...... – Louvre

像灰色圖像和點擊他們變黑了？或者你是否有兩組圖像開始變灰，並且當底部圖像上的頂部圖像被點擊變暗時？或者你只有6個複選框，當他們檢查時，所有圖像的圖像出現，但檢查的圖像是較暗的？ – DCR

這樣的事情？

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

來源

2017-07-02 21:05:23 DCR

感謝您的回答，我現在明白我不清楚的地方。我很抱歉。我有一個python gui，我的文本編寫器輸入產品文本並生成一個在我的網站上使用的html代碼。當html代碼被生成時，它會檢查複選框是否被選中，如果是的話，小黑色圖片會放在灰色圖片的頂部。由於網站具有響應性，因此每個黑色圖像必須具有基於灰色圖像的絕對位置。到目前爲止，如果選中了一個框，則黑色圖像被正確放置，但是如果選中了多個。後面的黑色圖像被放置錯誤 – Louvre

爲什麼不只是改變圖像的不透明度，沒有做同樣的事情，而不必下載和覆蓋圖像？ – DCR

這可以工作，我開放嘗試一切。截至目前看來，代碼中第一張黑色圖像的圖像被正確放置，但後一張圖像將自己置於某種程度上與第一張圖像相關。我也可以爲每個可能的選項添加單色圖像，但由於用戶可以按照任意順序或數字選擇1-2-3-4或5個圖像，它會創建很多，我認爲是不必要的代碼。我如何解決與ocpacity？ – Louvre

看看這個，看看它是否是你在找什麼：

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

來源

2017-07-02 22:43:08 DCR

如何將1到5張圖片放在另一張圖片上？

回答

相關問題