css - 固定背景滚动效果

Question

小问题:如何用css实现这种滚动效果？ ->

http://focuslabllc.com/

我已经试过了:

#one {
    background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-    maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#two {
    background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

谢谢! :)

Answer 1

它被称为“窗帘展示”，但在这种情况下它是相反的。 http://www.thecssninja.com/css/reveal-effect

基本上第一张“幻灯片”位于所有其他内容的“下方”并设置为 position: fixed 并说 z-index: 1 和所有其他内容设置为 position: relative 和 z-index: 10

http://jsfiddle.net/3n1gm4/8gDDy/

所以在代码中会是

HTML

<div class="slide1">CONTENT</div>
<div class="slide2">CONTENT</div>

CSS

.slide1 { 
    position: fixed;
    z-index: 1;  /* sets it below the other slides in the layer stack */
    height: 100%
}
.slide2 {
    position: relative;
    z-index: 10;  /* sets it above .slide1  */
    margin-top: 100%; /* this pushes it below .slide1 in the scroll */
    height: 100% /* full length slides */
}

* 这是很快完成的，可能不是 100% 准确，但旨在让您对那里发生的事情有一个基本的了解。