了解background-attachment屬性
| 值 | 描述 |
|---|---|
| scroll | 背景圖片隨着頁面的滾動而滾動，這是默認的。並不隨着div內的滾動而滾動（比如文本大於元素高度時的滾動，背景圖不動） |
| fixed | 背景圖片不會隨着元素或頁面的滾動而滾動。 |
| local | 背景圖片會隨着元素或頁面的滾動而滾動。 |
| initial | 表示默認值。 |
| inherit | 表繼承 |
fixed值
寫HTML ，當背景圖片大於元素高度時，設置background-attachment:fixed; 當頁面滾動，當前元素就可以得到不一樣的背景圖，很好看。
<!DOCTYPE html> <html lang="cn"> <head> <title>移動</title> <mate charset="UTF-8"> </head> <style> body{ padding: 0; margin: 0; font-family:Raleway,Helvetica,arial; } #bg-img{ background-image: url("https://ld-wp.template-help.com/rockthemes/21999/wp-content/uploads/2018/03/home_paralax2.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; padding: 121px 0px 120px 0px; position: relative; } #bg-img::after{ content: " "; height: 100%; width: 100%; top: 0; left: 0; position: absolute; background-color: #000000; opacity: 0.65; z-index: 1; } .empty{ height: 800px; background-color: bisque; } #bg-img ul{ padding:20px; margin: 0; position: relative; z-index: 2; } #bg-img li{ line-height: 30px; list-style-type: none; text-align: center; color: #fff; } </style> <body> <div class="empty"> 空 </div> <section id="bg-img"> <ul> <li>Need fresh and classy design? </li> <li>We are here to offer you the most unique and classy solutions! Every design idea and project we perform,</li> <li>completely meet our clients' requirements being at the same time creative and extraordinary.</li> <li>Read more</li> </ul> </section> <div class="empty"> 空 </div> </body> </html>