Question

我正在尝试实现一个效果，当一个带有png img的div（这个img中有洞）在另一个div里面，img里面会出现在图像的洞里面，但是现在它仍然结束了而不是在img与“窗口”。而且我仍然希望在div中使用img（“iphone-screen”）保持div与窗口（“iphone”）的图像因为响应问题（内部div的百分比宽度与外部div的宽度相关）。怎么实现呢？这是我网站的链接（转到“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: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;
}

感谢您的帮助！

Answer 1

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

带有“窗口”的PNG图像在另一个图像上

1 个答案: