css - 如何在封面图片(如 medium.com)上滚动页面内容？

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