在学css基础背景图相关时,有这样一个样式
background-attachment--修饰背景图固定位置
它有两个取值
scroll :默认效果, 随着盒子的移动而移动
fixed :根据浏览器可视窗口定位, 盒子移动, 图片不动
老师演示了一个好玩的例子--视差滚动,
用的是:background-attachment: fixed;
就是把三张图片放不同盒子里,图片不动,盒子移动
然后我们来看看怎么做吧
先定义三个盒子
<div class=" box box1"></div>
<div class=" box box2"></div>
<div class=" box box3"></div>
然后写css样式,先清边距,给html和body定宽高
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
在每个盒子插入背景图片
.box1{
background-image: url(./images/bg1.png);
}
.box2{
background-image: url(./images/bg2.png);
}
.box3{
background-image: url(./images/bg3.png);
}
还要定义每个盒子的宽高,用上background-attachment: fixed;
.box{
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
就可以运行出来了,真的很好玩。