这个案例本来应该是巩固css2.1中背景图片的百分比定位，我偷懒用了css3的多背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } body { background-image: url('img/bg-front.png'), url('img/bg-mid.png'), url('img/bg-rear.gif'); background-repeat: repeat-x, repeat-x, repeat-x; background-position: 20% 0, 40% 0, 150% 0; } </style> </head> <body> <p>这是内容</p> </body> </html>
当你切换浏览器窗口的大小，背景图片有滑动效果：演示地址：http://down.yesyes.wang/book/04/slidebg.html