关于CSS怎么设置滚动背景图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于CSS怎么设置滚动背景图相关的知识，希望对你有一定的参考价值。
主要代码如下，可就是不滚动，我用的是Dearmwearer8.0 <style type="text/css"> <!-- body background-attachment: scroll; background-image: url(image/r.jpg); background-repeat: no-repeat; background-position: center center; --> </style> </head> <body class="body"> <p>dfg</p> <p>fd</p> <p>gd</p> <p>f</p> <p>ds</p> <p>f</p> <p>ds</p> <p>f</p> <p>sd</p> <p>f</p> <p> </p> <p>f</p> <p>d</p> <p>
而不是怎么设置成活动
我建议你用css3来写，就是写一个小动画
具体怎么动，你改background-position的值就行了。
<style>@keyframes animatedBird
0% background-position: 20px 20px;
50% background-position: 30px 30px;
100% background-position: 300px -90px;
.animate-area
background:url(....);
animation: animatedBird 4s linear infinite;
</style>
<div class="animate-area"></div> 参考技术A 去掉class=“body”，background-attachment: scroll;——背景图片随内容的滚动而滚动 参考技术B bodybackground-image:url(skin/p_103x196_1.jpg);background-repeat:no-repeat;background-position:50% 200px;background-attachment:fixed;
[ background-image ] 指定对象的背景图像可以是真实图片路径或使用渐变创建的“背景图像 [ background-repeat ]： 指定对象的背景图像如何铺排填充
[ background-attachment ]： 指定对象的背景图像是随对象内容滚动还是固的
[ background-position ]： 指定对象的背景图像位置。
[ background-origin ]： 指定对象的背景图像显示的原点。
[ background-clip ]： 指定对象的背景图像向外裁剪的区域。
[ background-size ]： 指定对象的背景图像的尺寸大小。
建议 找个css 手册
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/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>以上是关于关于CSS怎么设置滚动背景图的主要内容，如果未能解决你的问题，请参考以下文章