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);
});

以下是Fiddle link

希望它有所帮助！

将图像加载到另一个上面

1 个答案: