CSS保健室｜background-attachment

background-attachment

網頁設計忍者報到，說到 background-attachment 就不能不提到鹿丸，看要牽制對方行動或用影子強迫對方做與施術者相同的動作，這可是奈良一族獨創的忍術耶，我們趕快去找他請教一下吧！

cover

background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其餘部分滾動。

background-image 通常要寫在前面，接著才能寫 background-attachment ，否則在部分的瀏覽器會無法判斷。

值	描述
scroll （影子束縛術）	默認值。網頁背景圖片會跟著頁面捲軸移動。網頁背景圖片不會跟著元素捲軸移動（如果有 overflow: scroll ）。（圖片來源）
fixed （影摑之術）	網頁背景圖片不會跟著頁面捲軸移動（視差滾動）。網頁背景圖片不會跟著元素捲軸移動（如果有 overflow: scroll ）。（圖片來源）
local （束影術）	網頁背景圖片會跟著頁面捲軸移動。網頁背景圖片會跟著元素捲軸移動（如果有 overflow: scroll ）。（圖片來源）

利用 local + scroll 做出的固定陰影效果

local+scroll

在這效果下，我們可以做出向上或是向下未讀完錯覺，利用了兩種模式的交叉運用，做出的視覺效果。
在文章最頂部沒有上陰影，中間上下會有陰影，最底部沒有下陰影。

.localxScroll{
  background:
    linear-gradient(white 30%, hsla(0,0%,100%,0)),
    linear-gradient(hsla(0,0%,100%,0), white 70%) bottom,
    radial-gradient(at top, rgba(0,0,0,.5), transparent 70%),
    radial-gradient(at bottom, rgba(0,0,0,.5), transparent 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

利用 scroll 做出的固定陰影效果

scroll

上下都有著固定的陰影，在哪邊都不會移動，就算到了最上層及最底層也不會有變化。

.attachmentxScroll{
  background:
    radial-gradient(at top, rgba(0, 0, 0, 0.5), transparent 70%),
    radial-gradient(at bottom, rgba(0, 0, 0, 0.5), transparent 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 18px, 100% 18px;
  background-attachment: scroll, scroll;
}

利用 local 做出的固定陰影效果

local

上下都有著固定的陰影，但只有各自移動到最上層及最底層才會出現。

.attachmentxLocal{
  background:
    radial-gradient(at top, rgba(0, 0, 0, 0.5), transparent 70%),
    radial-gradient(at bottom, rgba(0, 0, 0, 0.5), transparent 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px;
  background-attachment: local, local;
}