background-attachment
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
嘗試一下
語法
css
/* 關鍵字值 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
/* 全域值 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;
background-attachment
屬性可設定為以下列舉的關鍵字值之一。
值
形式定義
預設值 | scroll |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
繼承與否 | no |
Computed value | as specified |
Animation type | discrete |
形式語法
範例
簡單範例
HTML
html
<p>
大廳四周都有門,但它們都被鎖住了;當愛麗絲走到一邊又走到另一邊,試著每一扇門時,她悲傷地走到中間,想知道她該如何再次出去。
</p>
CSS
css
p {
background-image: url("star-solid.gif");
background-attachment: fixed;
}
結果
多重背景圖片
此屬性支援多個背景圖片。可以為每個背景指定不同的 <attachment>
,以逗號分隔。每張圖片會與對應的 <attachment>
類型匹配,順序由先指定到後。
HTML
html
<p>
大廳四周都有門,但它們都被鎖住了;當愛麗絲走到一邊又走到另一邊,試著每一扇門時,她悲傷地走到中間,想知道她該如何再次出去。突然,她看到一張三條腿的小桌子,全是由實心玻璃製成的;桌上除了有一把小小的金鑰匙外,什麼也沒有。愛麗絲的第一個想法是這把鑰匙可能屬於大廳的某扇門,但可惜的是,不是鎖太大,就是鑰匙太小,總之它無法打開任何一扇門。然而,在第二次繞過大廳時,她發現了一個之前沒注意到的低矮窗簾,窗簾後面是一扇大約十五英寸高的小門。她試著將小金鑰匙插入鎖孔,令她非常高興的是,鑰匙正好合適!
</p>
CSS
css
p {
background-image: url("star-solid.gif"), url("star-transparent.gif");
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat-y;
}
結果
規範
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background-attachment |
瀏覽器相容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-attachment | ||||||||||||
fixed | ||||||||||||
local | ||||||||||||
Multiple backgrounds | ||||||||||||
scroll |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.