1、背景固定的滚动页面 · 知识点整理

### 背景固定的滚动页面布局： #### 1、示例如下（可直接复制以下完整代码）： * * * * * ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景固定的滚动效果</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ height: 100%; } .box{ height: 100%; position: relative; z-index: 1; } .fixed_bg{ position: relative; height: 100vh; min-height: 100%; background-size: cover;//单独设置属性 background-repeat: no-repeat;//单独设置属性 background-position: center center;//单独设置属性 z-index: 1;//层级为1，要比没有设置背景固定的层级低 background-attachment: fixed;//背景固定 } .scrolling_bg{ position: relative; height: 100vh; min-height: 100%; background: #b4d7a8; z-index: 2; } .box1{ background-image: url(img/cd-background-1.jpg);//设置背景图片 } .box3{ background-image: url(img/cd-background-2.jpg);//设置背景图片 } .box5{ background-image: url(img/cd-background-3.jpg);//设置背景图片 } h2{ width: auto; height: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; line-height: 50px; font-size: 50px; color: #0162AC; text-align: center; } </style> </head> <body> <div class="box"> <div class="fixed_bg box1"> <h2>欢迎进入背景固定页面观赏</h2> </div> <div class="scrolling_bg box2"> <h2>这是页面第二屏</h2> </div> <div class="fixed_bg box3"> <h2>这是页面第三屏</h2> </div> <div class="scrolling_bg box4"> <h2>这是页面第四屏</h2> </div> <div class="fixed_bg box5"> <h2>这是页面第五屏</h2> </div> </div> </body> </html> ~~~ #### 2、注意事项： * * * * * 1. 使用：background-attachment: fixed;来设置背景固定； 2. 背景固定所在的div层级要比没有设置背景固定的div的层级低； 3. 设置背景图片时，只能使用：background-image: url();，不能使用：background: url(img/cd-background-3.jpg) no-repeat center center;，否则无效，其他属性要单独设置；