css基础——视觉差效果

在学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;
}

就可以运行出来了，真的很好玩。