0
点赞
收藏
分享

微信扫一扫

css基础——视觉差效果

福福福福福福福福福 2022-02-14 阅读 57

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

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

举报

相关推荐

0 条评论