例
如何指定一個固定的背景圖像：
body
{
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
}
試一試» 更多"Try it Yourself"下面的例子。
定義和用法
背景附著屬性設置背景圖像是否被固定或與頁面的其餘部分滾動。
| 默認值： | scroll |
|---|---|
| 遺傳： | no |
| 動畫： | no. Read about animatable |
| 版： | CSS1 |
| JavaScript語法： | object .style.backgroundAttachment="fixed" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-attachment | 1.0 | 4 | 1.0 | 1.0 | 3.5 |
Note: Internet Explorer 8和更早版本不一個元素上支持多個背景圖像。
CSS語法
background-attachment: scroll|fixed|local|initial|inherit;屬性值
| 值 | 描述 |
|---|---|
| scroll | 與元素以及背景滾動。 這是默認 |
| fixed | 背景是固定的對於視 |
| local | 與元素的內容一起的背景滾動 |
| initial | 將此屬性設置為默認值。 閱讀關於初始 |
| inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
更多示例
例
如何創建一個簡單的視差滾動效果(create an illusion of 3D depth)
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed
(don't scroll along with the page) */
background-attachment: fixed;
/* Center the background
image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background
image to be as large as possible */
background-size:
cover;
}
試一試» 相關頁面
CSS教程： CSS背景
HTML DOM參考： backgroundAttachment財產