概念

從最上層依序為：content box、padding box、border box、background box、shadow box，background 包含的範圍是從 padding-box 區域開始，且 background 不會覆蓋到 border。

圖取自 web.dev - Backgrounds

background-attachment

用來調整 background 圖像固定的模式

• scroll (預設)：相對於元素本身，背景固定位置
  • 類似於背景貼在元素容器中，捲動內容背景不動
• fixed：相對於整個 viewport 背景固定不動
  • 類似於背景貼在 viewport 上，怎麼捲動，背景都固定
• local：相對於元素的內容，背景固定位置
  • 類似於跟內容貼在一起，捲動內容，背景也會跟著動

background-origin

設定背景的原點

＊如果有設定 background-attachment: fixed，background-origin 屬性會被忽略

• border-box
• padding-box
• content-box

background-clip

控制 background 的顯示範圍

• border-box
• padding-box
• content-box
• text
• border-area

圖取自 What are the Key Values of Background-Clip Property in CSS?

參考資源

MDN Web Docs - background-attachment