background-attachment
網頁設計忍者報到，說到 background-attachment 就不能不提到鹿丸，看要牽制對方行動或用影子強迫對方做與施術者相同的動作，這可是奈良一族獨創的忍術耶，我們趕快去找他請教一下吧！
（ 圖片來源 ）
background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其餘部分滾動。
background-image 通常要寫在前面，接著才能寫 background-attachment ，否則在部分的瀏覽器會無法判斷。
| 值 | 描述 |
|---|---|
| scroll （ 影子束縛術 ） |
默認值。 網頁背景圖片會跟著頁面捲軸移動。 網頁背景圖片不會跟著元素捲軸移動（ 如果有 overflow: scroll ）。  （ 圖片來源 ） |
| fixed （ 影摑之術 ） |
網頁背景圖片不會跟著頁面捲軸移動（ 視差滾動 ）。 網頁背景圖片不會跟著元素捲軸移動（ 如果有 overflow: scroll ）。  （ 圖片來源 ） |
| local （ 束影術 ） |
網頁背景圖片會跟著頁面捲軸移動。 網頁背景圖片會跟著元素捲軸移動（ 如果有 overflow: 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 做出的固定陰影效果
上下都有著固定的陰影，在哪邊都不會移動，就算到了最上層及最底層也不會有變化。
.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 做出的固定陰影效果
上下都有著固定的陰影，但只有各自移動到最上層及最底層才會出現。
.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;
}
