Загрузить изображение поверх другого

Question

У меня 3 изображения внутри div. Как я могу динамически загружать и накладывать изображение на одно из трех изображений, которые находятся в div?

Мой HTML выглядит следующим образом

<div id="div1"> 


    <img id="img1" src="images/Green.png" draggable="false" class="tile" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <img id="img2" src="images/Green.png" draggable="false" class="tile" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <img id="img3" src="images/Green.png" draggable="false" class="tile" ondrop="drop(event)" ondragover="allowDrop(event)"> 


</div> 

<div id="inner"> 
    <img id="dragRed" src="images/Red.png" draggable="true" ondragstart="drag(event)" width="5%" height="5%"> 
    <img id="dragYellow" src="images/Yellow.png" draggable="true" ondragstart="drag(event)" width="5%" height="5%"> 
    <img id="dragGreen" src="images/Green.png" draggable="true" ondragstart="drag(event)" width="5%" height="5%"> 
</div> 

Я попытался с помощью этого скрипта, но он вызывает img1 исчезнуть.

$("#img1").each(function() { 
       var $overlay = $('<div></div>'); 
       $overlay.css({ 
        position: "relative", 
        display: "inline-block", 
        width: $(this).width(), 
        height: $(this).height(), 
        backgroundPosition: "center center", 
        backgroundImage: "url(images/affection.png)" 
       }); 
       $(this).wrap($overlay); 
      }); 

Answer 1

Основная проблема состоит в следующем: вы пытаетесь изменить фон то, что оборачивает изображение.фон всегда будет позади.

Вам необходимо включить элемент, который живет вместе с изображением и накладывает его. С некоторыми незначительными изменениями, мы обернуть изображения div:

<div id="div1"> 
    <div id="img1"> 
     <img src="https://placekitten.com/g/50/50" draggable="false" class="tile" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div> 
</div> 

И JS актуалисты выглядит для div и присоединяет накладку рядом с изображением:

$("#div1 div").each(function() { 
    var $overlay = $('<div class="overlay"></div>'); 
    $overlay.css({ 
    position: "absolute", 
    top: "0", 
    left: "0", 
    display: "inline-block", 
    zIndex: "1", 
    width: $(this).width(), 
    height: $(this).height(), 
    backgroundPosition: "center center", 
    backgroundImage: "url(https://placehold.it/50x50)" 
    }); 
    $(this).append($overlay); 
}); 

Вот Fiddle link

Надеюсь, это поможет!