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

这是页面的页脚： http://us.starcraft2.com/images/layout/bg-footer-bridge-t.png 如你所见，窗户是透明的，所以你可以看到页面的背景。

并且行星位于身体的底部背景中： http://us.starcraft2.com/images/layout/bg-planet-frontpage.jpg

你可以自己测试一下

HTML：

<div id="cn">
<div id="hd">
Strarcraft II test header
</div>
<div id="bd">
long list of bllablablba
</div>
<div id="ft">
</div>
</div>

的CSS：

body {
 background: url('http://us.starcraft2.com/images/layout/bg-planet-frontpage.jpg') center bottom no-repeat fixed;
}

div#cn{
 width: 1199px;
 margin: 0 auto;
}

div#ft{
 height: 190px;
background: url('http://us.starcraft2.com/images/layout/bg-footer-bridge-t.png')
}

在此处查看实时示例： http://jsfiddle.net/APpXn/

Answer 3

大卫，

我给了你一个投票，因为我很欣赏您在图片网址中的关联方式，以便我们可以方便地查看它们。但是，你的代码对我来说不起作用，我花了很多时间试图把它弄好。我不是说下面的html / css是最优的，但它对我有用。

注意：由于cockpit.png透明度，这在IE6中不起作用，但有一些变通办法： http://24ways.org/2007/supersleight-transparent-png-in-ie6

（顺便说一句，这是一个很棒的博客主题!!）

<html>
    <head>
        <style type="text/css">
            html {
                color: White;
                background: #040404 url('http://us.starcraft2.com/images/layout/bg-planet-frontpage.jpg') fixed center 300px no-repeat;
                text-align: center; }
            div#cn {
                width: 1200px;
                height: 800px;
                margin: 0 auto; }
            div#bd {
                height: 320px;
                background-color: #040404; }
            div#cockpit {
                height: 190px;
                background: url('http://us.starcraft2.com/images/layout/bg-footer-bridge-t.png') center top no-repeat; }
            div#bottom {
                height: 240px;
                background-color: #040404;
                padding-top: 40px; }
        </style>
    </head>
    <body>
        <div id="cn">
            <h1 id="hd">
                Strarcraft II test header
            </h1>
            <div id="bd">
                long list of bllablablba<br />
                long list of bllablablba
            </div>
            <div id="ft">
                <div id="cockpit">
                </div>
                <div id="bottom">
                    Courtesy of JohnB
                </div>
            </div>
        </div>
    </body>
</html>

Answer 4

尝试使用z-index css标签。它的作用是在不同的层中渲染div，因此它们可能具有类似

的东西

<div id="layer0"></div>
<div id="everythingElse"><div>

和

#layer0
{
 width: 100%;
 height: 100%;
 background: {The Background};
 z-index: 0;
}

#everythingElse
{
 z-index: 1;
}

Answer 5

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

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

5 个答案: