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.

background-attachment CSS 屬性設定背景圖片的位置是否固定在視區內，或者跟隨其包含區塊一起滑動。

嘗試一下

background-attachment: scroll;

background-attachment: fixed;

background-attachment: local;

background-attachment: local, scroll;

background-attachment: scroll, local;

<section id="default-example">
  <div id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill. London. Michaelmas term
    lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall.
    Implacable November weather. As much mud in the streets as if the waters had
    but newly retired from the face of the earth, and it would not be wonderful
    to meet a Megalosaurus, forty feet long or so, waddling like an elephantine
    lizard up Holborn Hill.
  </div>
</section>

body {
  overflow: scroll;
}

#default-example {
  height: 600px;
}

#example-element {
  max-width: 20rem;
  height: 100%;
  background:
    url("/shared-assets/images/examples/lizard.png") right 3rem top 1rem / 15rem
      no-repeat,
    url("/shared-assets/images/examples/moon.jpg") center / 10rem;
  color: #ff5454;
  font-size: 1.5em;
  font-weight: bold;
  overflow: auto;
  padding: 20px;
  text-shadow:
    0 0 0.6rem #000,
    0 0 0.6rem #000;
}

語法

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 屬性可設定為以下列舉的關鍵字值之一。

值

fixed: 背景相對於視區固定。即使元素有滑動機制，背景也不會跟著元素移動。
local: 背景相對於元素內容固定。如果元素有滑動機制，背景會跟隨元素內容一起滑動，且背景的繪製區域與定位區域是相對於元素的可滑動區域，而不是邊框。
scroll: 背景相對於元素本身固定，並且不會隨內容滑動。（它實際上是附加於元素邊框的。）

形式定義

預設值	`scroll`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
繼承與否	no
Computed value	as specified
Animation type	discrete

形式語法

background-attachment = 
  <attachment>#  

<attachment> = 
  scroll  |
  fixed   |
  local

範例

簡單範例

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

瀏覽器相容性

參見

使用多重背景