html - 带有“窗口”的PNG图片

我正在尝试实现一种效果，当其中一个带有png img的div（此img带有孔）在另一个div且其img里面的div出现在其上方的图像孔中时，但现在它仍然结束而不是被在img下带有“窗口”。而且由于响应问题（内部div的百分比宽度与外部div的宽度有关），我仍然希望将div放在img（“ iphone-screen”）下的div（带有窗口（“ iphone”）的图像）内。如何实现呢？这是我网站的链接（转到页面“ Kontakt”）：
CLICK

这是我的HTML标记：

    <div id="slide6" class="slide">
        <h1 class="big">Kontakt</h1>
        <h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2>
        <h2 class="mail">
            Napisz: <a href="mailto:[e-mail]"><span class="thick">[e-mail]</span></a>
        </h2>
        <div id="iphone">
            <img src="img/iphone.png" alt="" />
            <div id="iphone-screen">
                <img src="img/iphone-screen.png" alt="" />
            </div>
        </div>
    </div>

和CSS：

#slide6 #iphone{
    position:absolute;
    bottom:0;
    right:0;
    width:40%;
    z-index:600;
}

#slide6 #iphone > img{
    width:100%;
    height:auto;
    z-index:600;
}

#slide6 #iphone #iphone-screen{
    position:absolute;
    width:44.1%;
    overflow:hidden;
    bottom:24%;
    left:15%;
    z-index:100;
}

#slide6 #iphone #iphone-screen > img{
    width:100%;
    height:auto;
    z-index:100;
}

谢谢你的帮助！

最佳答案

我想这是div标签iphone-screen的问题。

关于html - 带有“窗口”的PNG图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12678666/