<返回更多

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

2023-03-29  IT萌宠  
加入收藏

效果图

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

注意:内部图片地址,自己替换成自己的图片

 


示例代码

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主要结构代码

<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/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>
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>