如何实现 im.qq.com 首页视觉差效果

Demo

http://sym.b3log.org/

源码地址

https://github.com/b3log/index/tree/master/src/main/webapp/sym

原理

使用 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

html 结构

css

.bg {
    position: relative;
    width: 100%;
    height: 600px;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/bg2.jpg);
}