html+css实现滚动背景图固定

 效果图

实现页面滚动，背景图穿过的效果

注意：内部图片地址，自己替换成自己的图片

---

示例代码

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: scroll\9;
	}
}

.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: scroll\9;
	}
}

.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: scroll\9;
	}
}

.cd-fixed-bg {
	position: relative;
	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

 html主要结构代码

<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>一亿技术人一亿技术人一亿技术人一亿技术人一亿技术人一亿技术人一亿技术人一亿技术人</span>
		</div>
	</div>
	<div class="cd-scrolling-bg cd-color-2">
		<div class="cd-container">
			<h2>开发者</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/[email protected]" 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>