最近在写项目的时候遇到一个页面效果:背景图片固定,但是当我们滚动滚动条的时候感觉背景图片也随着滚动条上下滚动,查阅了相关资料,做记录如下:
只要固定的元素的背景background-size值设置为cover,background-attachment的值设置为fixed,这样就实现了单页面的背景固定和滚动效果。
HTML代码:
<div class="testBefore"><h1>BEFORE</h1></div>
<div class="fixedBg"></div>
<div class="testAfter"><h1>AFTER</h1></div>
CSS代码:
<style>
body,html{ height: 100%; }
*{ margin: 0; padding: 0; }
.fixedBg{
min-height: 500px;
background-image: url("bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.testBefore,.testAfter{
background: #333;
width: 100%;
height: 300px;
text-align: center;
}
h1{
color: #fff;
font-size: 100px;
line-height: 300px;
}
</style>