在html5中制作一个静态web应用程序，需要一个图像在背景图像中滚动

Question

这很难用语言解释，但基本上是制作一个模型应用程序来演示我们即将实现的新UI的功能。我是这里的实习生，刚开始使用这个html、css和jquery。

背景图像中有一个项目列表，必须能够在背景中上下滚动，如果它离开div，则将其隐藏。你知道如何做到这一点吗？为了澄清我需要帮助的地方，我唯一能想到的就是附上一张照片。图片显示了应用程序（为了安全起见，我把所有东西都拿出来了），那些水平线是一个列表。现在这都是一张图片，但我会制作另一张应该上下滚动的图片，只在div中可见。有什么想法吗？

我只是想澄清一下，我不是在找讲义，也不是在找人为我写这个代码。我在网上花了很多时间试图找到一种方法来做这件事，但我永远无法用一种能让我得到我想要的结果的方式来表达这个问题。我是新手，对使用这些工具可能发生的所有事情都有基本的了解。只是想找个人给我指明正确的方向，无论是我可以研究的方法，还是可以更深入地解释这个话题的另一个网站的链接。

html:

<div id="background">
    <div id="container"></div>
</div>

CSS：

#container {
    overflow:auto;
    left:100px;
    top:100px;
    width:200px;
    height:300px;
    background-image:url('images/scroll.png');
}

Answer 1

这是一个非常通用的版本，内部元素可以更改为div或其他什么，但这演示了为单个项目添加背景，其中包含文本，具有固定大小的窗口，并允许内容滚动。

这里的关键是将容器设置为"overflow：auto"，离开屏幕的背景应该应用于包含"列表项"的元素。

jsFiddle示例

HTML:

<div class="container fake-list">
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>
<div class="fake-list-item"><img class="smile" /> Blah Blah Blah</div>

CSS：

.container {
    height: 200px; 
    width:300px; 
    overflow:auto;
    border: 2px solid #ccc;
    margin: 20px;
}
ul { list-style-type: none; padding: 0; margin:0;}
li {
    background-image:url('IMAGEURL');
    border-bottom:1px dotted black;
    padding:10px;
}
.fake-list { 
    background-image:url('IMAGEURL');
}
.fake-list-item { 
    padding:10px; 
    border-bottom:1px dotted black;
}
.fake-list-item:nth-of-type(odd) {
    background-image:url('IMAGEURL');
}
img.smile { 
    height: 25px; 
    width:25px;  
    content: url('IMAGEURL');
}

Answer 2

如果您试图使固定大小的div的内容在大于div本身时滚动，jsut将应用CSS溢出：auto；到div。或者使用overflow-y:scroll使滚动条始终显示；

<style type"text/css">
#container {
    width:200px; height: 100px; overflow: auto; 
    background-image:url('path/to/image.png');
}
</style>
<div id="conatiner">
    [List of items]
</div>