代码之家 › 专栏 › 技术社区 › Jason

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

css

Jason · 技术社区 · 15 年前

登陆星际争霸II网站 http://us.starcraft2.com/ 向下滚动到页面底部。注意你从驾驶舱向外看的样子。

当你上下滚动时,星星会独立于驾驶舱窗口移动,产生分层效果。

他们如何获得两个独立移动的图像?

编辑:感谢您的回复。我确实注意到他们使用的是一个透明的.png图像,但是我对他们是如何得到“滑动”效果很感兴趣,当你向下滚动时,这个行星会出现在那里。

我昨晚没有可用的开发环境来解决这个问题,但现在我发现了。

它是通过一对嵌套的DIV标记来实现的。父级的背景是“固定”的,子级的背景设置为“滚动”。相关的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>

5 回复 | 直到 15 年前

Williham Totland 15 年前

星场不动,只有驾驶舱动。你在页面的其余部分看到的并不是网站的实际背景;starfield是背景,但它被屏蔽了。

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

meo 15 年前

这是页面的页脚: 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/

JohnB 15 年前

戴维

我给了你一个投票,因为我很欣赏你如何链接到图片的网址,以便我们可以方便地看到它们。但是,你的代码对我来说不起作用,我花了很多时间试图使它正确。我不是说下面的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>

Gootik 15 年前

尝试使用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;
}

-1

Jason 15 年前

我知道他们是怎么做到的,在“编辑:”马克之后,我把答案放在了原来的帖子里。