將圖像加載到另一個圖像之上

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 nows查找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);
});

這是小提琴鏈接

希望能幫助到你！