Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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

imagepng

Demo

http://sym.b3log.org/

源码地址

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

原理

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

HTML 结构

imagepng

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);
}

欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步