内部滚动图像的iPhone剪影

我想使用里面的滚动图像覆盖iPhone展示移动网站设计，但图像不滚动覆盖的iPhone顶部有我做错了什么，以及如何我是否修复它？内部滚动图像的iPhone剪影

DEMO：http://jsfiddle.net/jonathanl5660/Lao36z20/

<div> 
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px" style="position: absolute; "> 
</div> 
<div style="width:300px;height:700px;overflow:scroll;margin:30px; position: relitive;"> 

<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="98%" height="700px" alt="" style="margin-top:150px;margin-left:10px;" /><br /> 
<br /> 

</div>

来源

2014-09-22 jl5660

我试图编辑您的例子，但像缝的jsfiddle不在我的机器上工作得很好... 无论如何，iphone应该有一个相对位置，并且z-index：-1（以便上面的图像完全可用）和上面的图像应该有位置绝对与明智的利润相关的父母（iphone） – Nick 2014-09-22 13:06:21

你可以组织你的HTML这样的：

<div class="iphone"> 
    <div class="container"> 
     <img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/> 
    </div> 
</div>

然后用CSS调整一下：

.iphone { 
    width:370px; 
    height:800px; 
    background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center; 
    background-size:100%; 
} 
.container { 
    position:relative; 
    top:152px; 
    width:293px; 
    margin:auto; 
    max-height:496px; 
    overflow:auto; 
} 
.container img { 
    width:100%; 
}

选中此demo Fiddle

来源

2014-09-22 13:16:40 DaniP

梦幻般的，只是我想要的谢谢。 – jl5660 2014-09-22 13:22:23

我已经分叉了你的例子，并稍微嚼了一下。通过将内容保持为恒定宽度，我们可以垂直扩展其容器，效果就好像我们只将滚动条向右移动一样。另请注意，我们可以针对x和y轴设置溢出行为。

这里的的jsfiddle链接：

http://jsfiddle.net/74yh81s4/2/

，代码：

<div class="position: relative"> 
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px"> 
</div> 
<div style="width:340px; height:472px; overflow-x:hidden; overflow-y:scroll; margin:30px; position: absolute; top: 142px; left: 17px"> 
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="295px" alt="" /> 
</div>

问候

来源

2014-09-22 13:18:29

内部滚动图像的iPhone剪影

回答

相关问题