使用 JavaScript 将图像叠加到另一个图像上

overlaying image on another image using javascript

本文关键字：图像另一个叠加使用 JavaScript 更新时间：2023-09-26

以下

代码我已经在小提琴中尝试过，但是当我真正将其放在桌面上时，它似乎甚至不起作用。尝试使用JavaScript将图像覆盖在主图像上。我想我在引用时出错了。一点帮助将不胜感激。

法典：

  <html>
  <head>
    <style>
        div {
            position:absolute;   
        }
        #main {   
            width:256px;
            height:256px;
        }
        #overlay {
            position:absolute;
            height:100px;
            width:100px;
            top:0;
            left:0; 
            display:none;
        }
        .overly {
            position:absolute;
            height:100px;
            width:100px;
            bottom:0;
            right:0; 
            display:none;    
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#main").mouseenter(function() {
                $("#overlay").show();
            });
            $("#main").mouseleave(function() {
                $("#overlay").hide();
            });
        });
        $(document).ready(function() {
            $("#main").mouseenter(function() {
                $("#overly").show();
            });
            $("#main").mouseleave(function() {
                $("#overly").hide();
            });
        });
    </script>
</head>
<body style="margin:0px; padding-top:0px">
    <div>
        <a href="">
            <img id="main" src="image/productold.JPG" />
            <img id="overlay"  src="image/over1.jpg"/>
            <img class="overly" src="image/over2.jpg"/>
        </a>
    </div>
</body>
</html>

尝试将 z 索引属性添加到两个div 的样式中。这应该允许您将一个放在另一个之上。例如：

  #main {   
            width:256px;
            height:256px;
            z-index: 0;
        }
        #overlay {
            position:absolute;
            height:100px;
            width:100px;
            top:0;
            left:0; 
            display:none;
            z-index: 1;
        }
        .overly {
            position:absolute;
            height:100px;
            width:100px;
            bottom:0;
            right:0; 
            display:none;
            z-index: 2;    
        }

有关此属性的详细信息，请参阅此处 Z 索引属性上的 W3Schools 页面。