经常看到一些网站,滚动页面但是背景图不会跟着滚动,好像一直固定在浏览器窗口,感觉挺酷的,哈哈哈
原来都是 background-attachment 这位大兄弟的功劳
background-attachment:需要配合background-image一起使用
scroll:默认值,背景随内容滚动而滚动
fixed:背景固定不动,不受内容滚动影响
直接上代码,哇哈哈哈 ~ ~
<div class="txt">永远相信美好的事情即将发生</div> <div class="bg1">原来就是这么简单哦</div> <div class="txt">永远相信美好的事情即将发生</div> <div class="bg2">原来就是这么简单哦</div> <div class="txt">永远相信美好的事情即将发生</div> <div class="bg3">原来就是这么简单哦</div> <div class="txt">永远相信美好的事情即将发生</div>
.txt{ width: 100%; height: 1000px; text-align:center; } .bg1, .bg2, .bg3{ width: 100%; height: 400px; background-size: cover; background-attachment: fixed; text-align: center; color: #fff; } .bg1{ background: url(img/3.jpg) no-repeat center center; } .bg2{ background: url(img/4.jpg) no-repeat center center; } .bg3{ background: url(img/1.jpg) no-repeat center center; }