如何将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张图片放在另一张图片上？

回答

相关问题