background-attachment · 跟老司機學CSS3

**background-attachment** * 描述：設置對象的背景圖是隨對象內容滾動還是固定的 * 版本：CSS1 | CSS3 該屬性在 CSS3 有修改 * 繼承性：無 **語法** ``` background-attachment: 滾動值; ``` 滾動值 * scroll：默認值。背景圖會隨著頁面其余部分的滾動而移動。 * fixed：背景圖相對于窗體固定，當頁面的其余部分滾動時，背景圖像不會移動。 * inherit：從父元素繼承 background-attachment 屬性的設置。 * local：背景圖像相對于元素內容固定，當元素隨元素滾動時背景圖像也會跟著滾動。（CSS3） **使用說明** 要設置背景圖是隨對象內容滾動還是固定的，必須先指定 background-image 屬性。 **代碼示例** 設置背景圖像對于窗體（視口）是固定的 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-attachment</title> <style> #container{ width: 400px; height: 400px; border: 1px solid #ff6600; background-image: url(../img/01.jpg); background-repeat: no-repeat; background-attachment: fixed; } #set_height{ height: 1500px; width: 30px; border: 10px dotted #336600; } </style> </head> <body> <div id="container"> </div> <div id="set_height"> </div> </body> </html> ```