background-attachment

用於控制背景圖片在捲動時行為的通用類別。

Class Styles

Class	Styles
`bg-fixed`	`background-attachment: fixed;`
`bg-local`	`background-attachment: local;`
`bg-scroll`	`background-attachment: scroll;`

bg-fixed

background-attachment: fixed;

bg-local

background-attachment: local;

bg-scroll

background-attachment: scroll;

範例（Examples）

固定背景圖片（Fixing the background image）

使用 bg-fixed 通用類別將背景圖片相對於視窗固定：

捲動內容以查看背景圖片固定在原位

My trip to the summit

November 16, 2021 · 4 min read

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

<div class="bg-[url(/img/mountains.jpg)] bg-fixed ...">  <!-- ... --></div>

隨容器捲動（Scrolling with the container）

使用 bg-local 通用類別使背景圖片隨容器和視窗一起捲動：

捲動內容以查看背景圖片隨容器捲動

Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day.

— Newman

<div class="bg-[url(/img/mountains.jpg)] bg-local ...">  <!-- ... --></div>

隨視窗捲動（Scrolling with the viewport）

使用 bg-scroll 通用類別使背景圖片隨視窗捲動，但不隨容器捲動：

捲動內容以查看背景圖片在容器中固定

— Newman

<div class="bg-[url(/img/mountains.jpg)] bg-scroll ...">  <!-- ... --></div>

響應式設計（Responsive design）

在 background-attachment 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

<div class="bg-local md:bg-fixed ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。