Javascript 如何使用图像作为帧，并在其中滚动？在网站上模拟手机

我不知道这叫什么，但开发人员是如何做到拥有Nexus手机的中空图像，然后在其中滚动内容的呢？这是一种巧妙的方法来模拟产品在现实生活中的工作方式，那么如何实现这一点呢

下面是一个例子，大约在页面的一半

@银猎人

我可以得到两个图像显示，但内容似乎是完全模糊的父分区。我测量的图像和尺寸是正确的

css:

.nexus5-frame {
background: url(img/nexus5frame.png);
height:640px;
width:326px;
position: relative;

}

.nexus5-content {
overflow: scroll;
height: 515px;
width: 292px;
position: absolute;
left: 26px;
top 597px;
}

HTML:

---

您需要将图像设置为父div中的背景图像。然后，内部正确测量的、绝对定位的div可以作为您的可滚动内容

<div id="main">
     <div id="content"></div>
</div>

屏幕为305x601（假设）

---

我建议你尝试一下，让我们知道你尝试了什么，出了什么问题。使用开发工具查看您的示例页面，看看发生了什么。啊，对不起，伙计，我确实尝试过重新创建页面（甚至复制粘贴代码），包括CSS以外的所有内容（可能这就是我所缺少的），但它不起作用，所以我决定问你们。我能够找到我自己问题的答案。我只是犯了个愚蠢的错误。投你的票作为答案，因为你是对的。

<div id="main">
     <div id="content"></div>
</div>

#main {
    background: url(/filelocation) no-repeat;
    height: 661px;
    width: 345px;
    position: relative;
}

#content {
    overflow: auto; /*this gives us our scroll bar when the content is longer than the div*/
    height: 601px;
    width: 305px;
    position: absolute;
    left: 20px;
    top: 30px;
}