Question

我仅使用CSS创建了视差滚动效果。但是，我很难理解它为什么会起作用。有人可以帮忙解释一下。

HTML

<div class="image"></div>
<section class="content">
    <p>TEXT GOES HERE</p>       
</section>

CSS

.image {
    background: url('http://s28.postimg.org/v6mfcxbyl/galaxy.jpg') no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px;
}
.content {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    z-index: 2;
    background: #FFF;
    width: 100%;
}

看起来它与设置固定在图像div上的背景有关。

这是一个工作小提琴http://jsfiddle.net/pAjNr/

Answer 1

静态固定或相对（根据文档）背景图像的位置将创建背景效果。

标题的位置固定为z-index低于滚动时覆盖的内容。

以下内容只是正常情况，在滚动时它只覆盖z-index以下的所有固定元素。

Answer 2

position:fixed和background-attachment:fixed表示该元素不会相对于视口移动。因此，无论您滚动多少，标题（position:fixed）和背景图像（background-attachment:fixed）都不会移动。确实移动的是文本（.content），它没有position:fixed。

当文本越过标题时，它具有更高的z-index（和position:relative，因此不会忽略z-index），因此它隐藏了它下面的任何内容（标题）。

Answer 3

将背景设置为固定将修复背景图像相对于视口，即使元素本身滚动（请参阅此处添加了边框：Example 1）。

您也可以使用.image定位position:fixed元素本身，并为.content元素添加偏移量：Example 2以获得完全相同的效果。

这个CSS只有Parallax如何工作？

3 个答案: