0

我试图达到一种效果，当一个带有 png img 的 div （这个 img 里面有洞）在另一个里面有 img 的 div 上面会出现在它上面的图像洞中，但现在它仍然结束而不是被在带有“窗口”的 img 下。由于响应问题（内部 div 的百分比宽度与外部 div 的宽度有关），我仍然希望将必须位于 img （“iphone-screen”）下的 div 与带有窗口的图像（“iphone”）保持在 div 内。如何做到这一点？这是我网站的链接（转到“Kontakt”页面）： 点击

这是我的 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:biuro@dentmedica.pl"><span class="thick">biuro@dentmedica.pl</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;
}

谢谢你的帮助！

4

1 回答 1

1

我想这是 div 标签的问题iphone-screen..删除它

于 2012-10-01T19:17:28.837 回答