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

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

css

Css 暴雪是如何为星际争霸II网站实现分层驾驶舱视图的？,css,Css,进入星际争霸II网站，并向下滚动至页面底部。注意它看起来像是从驾驶舱向外看当你上下滚动时，星星独立于驾驶舱窗口移动，形成分层效果它们如何使两个图像彼此独立地移动编辑：感谢下面的回复。我注意到他们使用的是一个透明的.png图像，但我感兴趣的是他们是如何获得“滑动”效果的，当你向下滚动时，行星就会出现在你的视野中昨晚我没有可用的开发环境来解决这个问题，但我现在明白了它是通过拥有一对嵌套的div标记来实现的。父对象的背景为“固定”，子对象的背景为“滚动”。相关css如下所示： <sty

进入星际争霸II网站，并向下滚动至页面底部。注意它看起来像是从驾驶舱向外看

当你上下滚动时，星星独立于驾驶舱窗口移动，形成分层效果

它们如何使两个图像彼此独立地移动

编辑：感谢下面的回复。我注意到他们使用的是一个透明的.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>


父母亲
{
背景：url（“/Images/Fixed Image.png”）无重复固定50%100%透明；
位置：相对位置；
高度：800px；
}
.家长组
{
背景：url（“/Images/Scrolling Image.png”）无重复滚动50%190px透明；
身高：100%；
}

以及html：

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


星域不动，只有驾驶舱动。你在页面的其余部分看到的不是网站的实际背景；星光场是背景，但它被遮住了
编辑：具体来说：驾驶舱是一个带有透明窗口的PNG；显示其下页面的真实背景。这是页面的页脚：
正如您所看到的，窗口是透明的，因此您可以看到页面的背景
行星就在身体的底部背景中：

你可以自己测试一下
html:
请参见此处的示例：
大卫
我给你投票是因为我很欣赏你在图片URL中的链接，这样我们可以方便地看到它们。然而，你的代码对我不起作用，我花了很多时间试图把它弄对。我并不是说下面的html/css是最优的，但它对我来说是有效的
注意：这在IE6中不起作用，因为caffict.png是透明的，但应该有一些变通方法：

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

html{
颜色：白色；
背景：#040404 url（''）固定中心300px无重复；
文本对齐：居中；}
中国区{
宽度：1200px；
高度：800px；
边距：0自动；}
屋宇署分区{
高度：320px；
背景色：#040404；}
驾驶舱{
高度：190px；
背景：url（“”）中间顶部不重复；}
舱底{
高度：240px；
背景色：#040404；
填充顶部：40px；}
Strarcraft II测试集管
bllablabba的长列表

bllablabba的长列表
约翰布提供
尝试使用z-index css标记。它所做的是在不同的层中渲染div，因此它们可能具有类似
<div id="layer0"></div>
<div id="everythingElse"><div>

我弄明白了他们是怎么做到的，并在“编辑：”标记后将答案放在原始帖子中。它可以正常工作。看：我刚刚在URL中出错，我已经更正了我的帖子。你提供的链接中的代码现在对我有效，谢谢。我想发布一个完整的解决方案，人们可以轻松地将其保存到.html文件并自行测试。但是jsFiddle.net在这方面非常好！谢谢你让我知道这个强大的工具！你必须建造额外的塔架！您的解决方案不正确：您写道：background:url（“/Images/Scrolling Image.png”）不重复滚动50%190px透明；在父分区中。这意味着您的背景图像距离左边框50%，距离顶部190px。它不是固定的：P也许它在你的屏幕上工作。但这是一个非常不合适的解决方案图像的定位（即50%190px等）适合用于测试解决方案的图像。我希望大多数开发者会意识到，他们不能对他们的图像使用相同的定位。我提供了另一个开发人员如何复制结果的示例。
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')
}

<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>
<div id="layer0"></div>
<div id="everythingElse"><div>

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

#everythingElse
{
 z-index: 1;
}