CSS 固定背景滚动效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19638467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed Background Scroll Effect
提问by mrks
short question: How do I achieve this scrolling effect with css? ->
简短的问题：如何用 css 实现这种滚动效果？->
I already tried this:
我已经试过了：
#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;
}
Thanks! :)
谢谢！:)
回答by b.kelley
Its called a "curtain reveal" but in this instance its in reverse. http://www.thecssninja.com/css/reveal-effect
它被称为“幕布”，但在这种情况下是相反的。 http://www.thecssninja.com/css/reveal-effect
Essentially the first "slide" is located "below" all the other content and set to position: fixedand say z-index: 1and all the others are set to position: relativeand z-index: 10
基本上，第一张“幻灯片”位于所有其他内容的“下方”，并设置为position: fixed和说z-index: 1，所有其他内容都设置为position: relative和z-index: 10
http://jsfiddle.net/3n1gm4/8gDDy/
http://jsfiddle.net/3n1gm4/8gDDy/
so in code it would be
所以在代码中它会是
HTML
HTML
<div class="slide1">CONTENT</div>
<div class="slide2">CONTENT</div>
CSS
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 */
}
*This was quickly done and probably not 100% accurate but intended to give you a basic idea about whats going on there.
*这很快就完成了，可能不是 100% 准确，但旨在让您对那里发生的事情有一个基本的了解。
回答by tomsullivan1989
Ok, you can do this with just CSS.
好的，你可以只用 CSS 来做到这一点。
HTML
HTML
<div class="main">Sample text/div>
<div class="reveal-me-holder"></div>
<div class="reveal-me">Revealed</div>
CSS
CSS
body {
margin:0;
}
.main {
height: 700px;
position:relative;
z-index: 2;
background: red;
}
.reveal-me {
height: 500px;
position:fixed;
bottom:0;
width:100%;
background: black;
color:white;
}
.reveal-me-holder {
height: 500px;
}
This jsfiddleshows the results.
这个jsfiddle显示了结果。
