CSS background-attachment 屬性
示例
一個背景影像不會隨著頁面滾動（固定）
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
background-attachment 屬性設定背景影像是否隨頁面其他部分一起滾動，或者是否固定。
| 預設值 | scroll |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS1 |
| JavaScript 語法 | object.style.backgroundAttachment="fixed" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 語法
background-attachment: scroll|fixed|local|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| scroll | 背景影像將隨頁面一起滾動。這是預設值 |
| fixed | 背景影像將不會隨頁面一起滾動 |
| local | 背景影像將隨元素的內容一起滾動 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
一個背景影像將隨頁面一起滾動（scroll）。這是預設值
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
自己動手試一試 »
示例
如何建立簡單的視差滾動效果（創造 3D 深度錯覺）
.fixed-bg {
/* 背景影像 */
background-image: url("img_tree.gif");
/* 設定指定高度，或背景影像的最小高度 */
min-height: 500px;
/* 設定背景影像為固定（不隨頁面一起滾動） */
background-attachment: fixed;
/* 背景影像居中 */
background-position: center;
/* 設定背景影像不重複 */
background-repeat: no-repeat;
/* 將背景影像縮放到儘可能大 */
background-size: cover;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 背景
HTML DOM 參考：backgroundAttachment 屬性
