视差效果原理 background-attachment:fixed
<html> <head> <style type="text/css"> body { background-image:url('http://images2015.cnblogs.com/blog/441096/201610/441096-20161013163910781-1393436376.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style> </head> <body> <body> <div style="width:100px;height:100px;background:red;position:absolute;top:100px;left:100px"> </div> <div style="width:100px;height:100px;background:blue;position:absolute;top:300px;left:300px"> </div> <div style="width:100px;height:100px;background:white;position:absolute;top:600px;left:600px"> </div> <div style="width:100px;height:100px;background:gray;position:absolute;top:900px;left:900px"> </div> <div style="width:100px;height:100px;background:black;position:absolute;top:1200px;left:1200px"> </div> </body> </body> </html>