如何通过封面图片（如media.com）滚动页面内容？ [英] How do you scroll the page content over a cover image (like medium.com)?

问题描述

我想尝试复制在media.com上找到的封面图片的滚动效果（例如： http://medium.com/@ev ）。当您向下滚动页面时，封面照片保持固定，内容将滚动显示在其上，随时随地覆盖。有人知道如何做到这一点与CSS？

I want to try to replicate the cover image's scroll effect found on medium.com (example: http://medium.com/@ev). As you scroll down the page, the cover photo stays fixed and the content scrolls over it, covering it up as you go. Does anyone know how to do this with CSS?

感谢！

推荐答案

在一个正文上的背景图像为固定，然后使用一个 div ，没有颜色/图像作为标题。

you can do this very simply by setting the background image on a body as fixed and then using a div with no color/image as a header.

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

JSFIDDLE

UPDATE

它直接指向您所定位的容器，而不是正文。在这种情况下，它是头

A better solution is to add it directly to the container you are targeting rather than the body. In this case it's the 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;
} 

结果是相同的，但是这样你不需要一个容器

The results are identical but this way you don't need a container with a background color to cover up the image like the previous solution

NEW FIDDLE

这篇关于如何通过封面图片（如media.com）滚动页面内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！