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;，否則無效，其他屬性要單獨設置；