暴雪如何实现星际争霸II网站的分层驾驶舱视图？

Question

访问Starcraft II网站http://us.starcraft2.com/并向下滚动到页面底部.注意看起来你是怎么看出驾驶舱的.

当您向上和向下滚动时,星星会独立于驾驶舱窗口移动,从而产生分层效果.

他们如何让两张图像彼此独立移动？

编辑:感谢下面的回复.我确实注意到他们使用的是透明的.png图像,但我对他们如何获得"滑动"效果很感兴趣,当你向下滚动时行星会进入视野.

我昨晚没有使用我的开发环境来完成它,但我现在想出来了.

它是通过一对嵌套的div标签实现的.父级的背景是"固定的",子级1的背景设置为"滚动".相关的CSS如下:

<style type="text/css">
    .parent 
    {
        background: url("/Images/Fixed Image.png") no-repeat fixed 50% 100% transparent;
        position: relative;
        height: 800px;
    }
    .parent div
    {
        background: url("/Images/Scrolling Image.png") no-repeat scroll 50% 190px transparent;
        height: 100%;
    }
</style>

和HTML:

<div class="parent" >
    <div>
        &nbsp;
    </div>
</div>

Answer 1

星空不动,只有驾驶舱.您在页面其余部分看到的不是网站的实际背景; 星空是背景,但它是蒙面的.

编辑:具体来说:驾驶舱是一个带透明窗户的PNG; 显示其下的页面的真实背景.

Answer 2

我弄清楚了他们是如何做到的，并将答案放在原始帖子中的“编辑：”标记之后。