Question

下面的代码我试过小提琴但是当我实际上在我的桌面上得到它时，似乎甚至没有工作。尝试使用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>

Answer 1

尝试将z-index属性添加到两个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-Index属性here上的W3Schools页面。

使用javascript将图像叠加在另一个图像上

1 个答案: