加载另一个图像

Question

我有一个div内的3个图像。我如何动态加载和覆盖在这三个图像在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 NOW的外观为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

希望它有帮助！