Question

我想尝试复制在medium.com上找到的封面图片的滚动效果（例如：http://medium.com/@ev）。当您向下滚动页面时，封面照片会保持固定状态，内容会在其上滚动，随着时间的推移覆盖它。有谁知道如何用CSS做到这一点？

谢谢！

Answer 1

您可以非常简单地将身体上的背景图像设置为fixed，然后使用没有颜色/图像的div作为标题。

body{
    background: url("image.JPG") no-repeat top center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

JSFIDDLE

<强>更新

更好的解决方案是将其直接添加到您定位的容器而不是body。在这种情况下，它是header

.header{
   background: url("http://upload.wikimedia.org/wikipedia/commons/8/86/Jefferson_Park_in_Chicago.JPG") no-repeat top center fixed;
   background-size: cover;
   height: 200px;
   width: 100%;
   margin: 0;
   padding: 0;
   color: white;
   text-align: center;
   font-size: 50px;
}

结果完全相同，但这样您就不需要具有背景颜色的容器来覆盖图像，就像之前的解决方案一样

NEW FIDDLE

Answer 2

这很简单：

background-attachment:fixed;

无论你想要什么，你的固定背景。

（example）

但是，代表我的个人经历。您还可以考虑视差滚动库。它让它感觉更具交互性，而不是固定的背景......有一些JavaScript库可以实现滚动效果（取决于你想要触发效果的方式）。但是，下面是我喜欢的一些。

ParallaxJS（source）

根据鼠标或设备的陀螺仪（移动倾斜）创建视差效果。

StellarJS（source）

根据滚动位置创建视差效果。这是我最喜欢的选择，因为它基于滚动（我相信它也支持移动滚动）。因此，您不必为了获得效果而更改大部分布局。

如何在封面图片上滚动页面内容（如medium.com）？

2 个答案:

ParallaxJS（source）

StellarJS（source）