我们如何做类似于这个例子中的操作:http://theme.nileforest.com/html/mazel-v1.1/home-text-rotator1.html。他们将背景图片固定,并放置在上面的内容。我不确定他们是只用CSS实现还是使用了JavaScript。我还在尝试研究它。如果您有任何固定示例或指针,那将是一个好的开始。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.block-parallax-1 {
overflow: hidden;
position: relative;
}
.block-parallax-1 .parallax-bg {
background-attachment: fixed;
background-image: url('http://bygaga.com.ua/uploads/posts/1354003535_podborka_krasivih_moto_759-58.jpg');
background-position: 0px 0px;
background-repeat: repeat;
height: 100%;
position: absolute;
width: 100%;
min-width: 1170px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.block-parallax-1 .md-box {
padding: 200px 0 200px;
background: rgba(0, 0, 0, 0.75);
position: relative;
height: 100%;
text-align: center;
}
.block-parallax-1 .md-box h1 {
color: #fff;
}
.block-parallax-2 .parallax-bg {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_z73DvFVC1ek9ZsGdCpvpDW_AwRqOWgG6IP2wOXrVibxz_EDV');
}
h2 {
color: #555;
text-align: center;
padding: 25px 0;
margin: 0;
}
<section class="block-parallax-1">
<div class="parallax-bg"></div>
<div class="md-box">
<h1>background-attachment:fixed</h1>
</div>
</section>
<section style="min-height:400px;">
<h2>background</h2>
<p></p>
</section>
<section class="block-parallax-1 block-parallax-2">
<div class="parallax-bg"></div>
<div class="md-box">
<h1>background-attachment:fixed</h1>
</div>
</section>
#myBackgroundContainer{
background-attachment:fixed;
}
从文档中得知:
background-attachment CSS 属性确定图像在视口内是固定的,还是随着其包含块滚动。
body {
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSHC-qntWkhfC_CP9UcIle2WQItuhlbFS_AGK3WdtrAc4Pp6OIu');
background-repeat: no-repeat;
background-attachment: fixed;
}
#Partition{
background:gray;
height:200px;
}
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div id="Partition"></div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
我已经创建了一个带有 background-attachment: fixed;
的简单fiddle。