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

Posted 2022-08-04 JackieDYH

 效果图

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

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

---

示例代码

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/[e-mail]" 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>