多说无意,上代码:
/* 写HTML ,当背景图片大于元素高度时,设置background-attachment:fixed; 当页面滚动,当前元素就可以得到不一样的背景图,很好看。 */
<style>
body{
height: 1500px;
}
.title {
background: white;
padding: 60px;
margin: 0 auto;
text-align: center;
}
.title h1 {
font-size: 35px;
letter-spacing: 8px;
}
.parallax-one {
padding-top: 100px;
padding-bottom: 100px;
overflow: hidden;
position: relative;
width: 100%;
background-image: url(https://b.zol-img.com.cn/desk/bizhi/image/10/960x600/1598319721647.jpg);
/* 写HTML ,当背景图片大于元素高度时,设置background-attachment:fixed; 当页面滚动,当前元素就可以得到不一样的背景图,很好看。 */
background-attachment: fixed;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
</style>
<body>
<div>
<!-- 第一个section姑且算作内容区域,其实第二个也可以作为内容区域的,看个人需求 -->
<section>
<div class="title">
<h3>Let's do some</h3>
<h1>PARALLAX</h1>
</div>
</section>
<section>
<div class="parallax-one">
<h2>SOUTHERN CALIFORNIA</h2>
</div>
</section>
</div>
<div>
<section>
<div class="title">
<h3>Let's do some</h3>
<h1>PARALLAX</h1>
</div>
</section>
<section>
<div class="parallax-one">
<h2>SOUTHERN CALIFORNIA</h2>
</div>
</section>
</div>
</body>