效果圖

實(shí)現(xiàn)頁(yè)面滾動(dòng)，背景圖穿過(guò)的效果

注意：內(nèi)部圖片地址，自己替換成自己的圖片

示例代碼

css樣式代碼

* {
	margin: 0;
	padding: 0;
}
 
body,
html {
	height: 100%;
}
 
body {
	font-size: 100%;
	font-family: Roboto, sans-serif;
	color: #4d4d4d;
	background-color: #fff;
}
 
.cd-main-content {
	height: 100%;
	position: relative;
	z-index: 1;
}
 
.cd-fixed-bg.cd-bg-1 {
	background-image: url(https://www.csdn.NET/company/img/cd-background-4.jpg);
}
 
@media only screen and (min-width: 1170px) {
	.cd-fixed-bg {
		background-attachment: fixed;
		background-attachment: scroll9;
	}
}
 
.cd-fixed-bg {
	position: relative;
	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}
 
.picinfo {
	position: absolute;
	left: 50%;
	bottom: 40px;
	right: auto;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 90%;
	max-width: 900px;
	font-size: 30px;
	font-size: 1.875rem;
	text-shadow: 0 1px 3px rgb(0 0 0 / 30%);
	color: #fff;
}
 
.cd-fixed-bg h1,
.cd-fixed-bg h2 {
	padding-top: 168px;
}
 
@media only screen and (min-width: 1170px) {
 
	.cd-fixed-bg h1,
	.cd-fixed-bg h2 {
		font-size: 48px;
		font-weight: 300;
	}
}
 
.picinfo span {
	display: inline-block;
	line-height: 24px;
	padding: 10px 0 0 0;
	margin: 10px 0 0 0;
	font-size: 16px;
	border-top: .5px #ccc solid;
}
 
.cd-scrolling-bg.cd-color-2 {
	background-color: #fff;
	color: #4d4d4d;
}
 
@media only screen and (min-width: 768px) {
	.cd-scrolling-bg {
		padding: 1em 0;
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 2;
		font-weight: 300;
	}
}
 
.cd-scrolling-bg {
	position: relative;
	padding: 1em 0;
	line-height: 1.6;
	z-index: 2;
}
 
.cd-container {
	width: 90%;
	max-width: 900px;
	margin: 0 auto;
	font-size: 15px;
}
 
.cd-fixed-bg.cd-bg-4 {
	background-image: url(https://www.csdn.net/company/img/cd-background-4.jpg);
}
 
@media only screen and (min-width: 1170px) {
	.cd-fixed-bg {
		background-attachment: fixed;
		background-attachment: scroll9;
	}
}
 
.cd-fixed-bg {
	position: relative;
	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}
 
.picinfo {
	position: absolute;
	left: 50%;
	bottom: 40px;
	right: auto;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 90%;
	max-width: 900px;
	font-size: 30px;
	font-size: 1.875rem;
	text-shadow: 0 1px 3px rgb(0 0 0 / 30%);
	color: #fff;
}
 
.cd-scrolling-bg.cd-color-3 {
	color: #3d3536;
}
 
@media only screen and (min-width: 768px) {
	.cd-scrolling-bg {
		padding: 1em 0;
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 2;
		font-weight: 300;
	}
}
 
.cd-scrolling-bg {
	position: relative;
	padding: 1em 0;
	line-height: 1.6;
	z-index: 2;
}
 
.cd-container {
	width: 90%;
	max-width: 900px;
	margin: 0 auto;
	font-size: 15px;
}
 
.chart-1 {
	display: block;
	width: 100%;
	max-width: 800px;
	margin: 2em auto 0;
}
 
.cd-fixed-bg.cd-bg-5 {
	background-image: url(https://www.csdn.net/company/img/cd-background-5.jpg);
}
 
@media only screen and (min-width: 1170px) {
	.cd-fixed-bg {
		background-attachment: fixed;
		background-attachment: scroll9;
	}
}
 
.cd-fixed-bg {
	position: relative;
	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

html主要結(jié)構(gòu)代碼

<main class="cd-main-content" id="csdn-previewimg-box">
	<div class="cd-fixed-bg cd-bg-1">
		<div class="picinfo" id="about">
			<h1>模塊一</h1><span>一億技術(shù)人一億技術(shù)人一億技術(shù)人一億技術(shù)人一億技術(shù)人一億技術(shù)人一億技術(shù)人一億技術(shù)人</span>
		</div>
	</div>
	<div class="cd-scrolling-bg cd-color-2">
		<div class="cd-container">
			<h2>開發(fā)者</h2>
			<ul>
				<li>JackieDYHJackieDYHJackieDYH</li>
				<li>JackieDYHJackieDYHJackieDYH</li>
				<li>JackieDYHJackieDYHJackieDYH</li>
			</ul>
			<h2>資源</h2>
			<div class="csdn-digitalinfo">
				<div style="color: #FF6C46;" class="title">HAHA</div>
				<div style="color: #4D4D4D;" class="content">HAHA</div>
			</div>
		</div>
	</div>
	<div class="cd-fixed-bg cd-bg-4">
		<div class="picinfo" id="contact">
			<h2>模塊二</h2>
		</div>
	</div>
	<div class="cd-scrolling-bg cd-color-3">
		<div class="cd-container programmer">
			<p><img src="https://www.csdn.net/company/img/rectangle@2x.jpg" alt="" class="chart-1"></p>
			<h2>地址</h2>
			<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
			<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
			<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
			<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
			<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
		</div>
	</div>
	<div class="cd-fixed-bg cd-bg-5">
		<div class="picinfo" id="statement">
			<h2>模塊三</h2>
		</div>
	</div>
</main>