JSFiddle Demo

Question

我一整天都在搜索关于如何获得背景图片的教程，可以通过页面顶部的内容查看。例如，如果您向下滚动此站点

http://newsmartwave.net/magento/legenda/index.php/?___store=english3

你会看到一个图像出现在页面的中央，如果你向下移动图像消失，就像图像在背景中，页面在它的顶部。有人可以指导我一个教程，说明我如何实现这项技术？非常感谢您的支持。

此网站是另一个例子

http://newsmartwave.net/magento/legenda/index.php/?___store=english7

小看公司业绩部分，看看背后的背景图片。

Answer 1

在css中使用background-attachment:非常容易：

#seethrough{
    width:100%;
    height:300px;
    background:url(http://lorempizza.com/600/300/);
    background-size:cover;
    background-attachment:fixed;
}

HTML

<div id="seethrough"></div>

JSFiddle Demo
如果你想让它变暗，就像它们在你的例子中那样，只需在内部放置一个带有半透明背景的div：

#cover{
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.5);
}

HTML

<div id="seethrough">
        <div id="cover">

        </div>
    </div>

JSFiddle Demo
背景也有一点视差滚动效果如果你 Google it ，你可以找到大量的教程或者一个相当不错的是here
无论如何，这是我的版本：
的 JQuery的：

$（document）.ready（function（）{

$(document).scroll(function () { s = $(document).scrollTop(); $("#seethrough").css("background-position","0px -" + (s/2) + "px"); }) })

相同的HTML和CSS，更令人敬畏！

JSFiddle Demo

Answer 2

你正在寻找什么称为视差滚动。

使用js。

根据使用的顶部操纵背景图像的背景位置

你可以找到很多关于此的教程。

我自己选择了这个很棒的技巧here。

Answer 3

我已经使自己对我的一些网站产生了类似的影响，并且我使用了不同的aproach（和更多的旧浏览器兼容）。如果做得好，也很简单：

html：

<div class="image">
</div>
<div class="web-content1">
    first content
</div>
<div class="web-content2">
    second content
</div>
<div class="hole">
    hole
</div>
<div class="web-content3">
    third content
</div>

和css：

.image {
    position:fixed;
    z-index:-100;
    height:100%;
    width:100%;
    background: url(http://fc02.deviantart.net/fs71/i/2010/135/4/0/Background_11_by_ELENADUDINA.jpg) no-repeat center center;
    background-size:cover;
}
.web-content1, .web-content2, .web-content3, .hole {
    width:100%;
    height: 200px;
    position:relative;
}
.web-content1 {background-color:red;}
.web-content2 {background-color:green;}
.web-content3 {background-color:blue;}

这里有一个例子（向下滚动）：http://jsfiddle.net/9rdto1hk/1/

在我正在工作的网络中，您可以看到它使用了两次。首先是在主要滑块顶部，第二个在网络底部：www.zimasolutions.com

Css通过小内容查看背景图像

3 个答案:

JSFiddle Demo