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

在 http://us.starcraft2.com/转到星际争霸II网站并向下滚动到页面底部.注意看起来你是怎么看出驾驶舱的.

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

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

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

解决方法

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

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

原文地址：https://www.jb51.cc/css/215925.html