背景
background-attachment
用於控制背景圖片在滾動時如何運作的實用程式。
| 類別 | 樣式 |
|---|---|
bg-fixed | background-attachment: fixed; |
bg-local | background-attachment: local; |
bg-scroll | background-attachment: scroll; |
範例
固定背景圖片
使用 bg-fixed 實用程式將背景圖片相對於視窗固定
滾動內容以查看固定在原位的背景圖片
我的登頂之旅
2021 年 11 月 16 日 · 閱讀時間 4 分鐘
也許我們可以沒有圖書館，像你我這樣的人。也許。當然，我們太老了，無法改變世界，但是那個孩子呢，現在坐下來，打開一本書，在當地圖書館的分館裡，發現帽子裡的貓和五個中國兄弟上畫著小雞雞和尿尿的圖畫？他不值得擁有更好的嗎？
聽著。如果你認為這與過期罰款和丟失的書籍有關，你最好再想想。這關係到那個孩子有權閱讀一本書而不讓他的思想扭曲！或者：也許這讓你興奮，Seinfeld；也許這就是你獲得樂趣的方式。你和你的歡樂夥伴。
<div class="bg-[url(/img/mountains.jpg) bg-fixed ..."> <!-- ... --></div>與容器一起滾動
使用 bg-local 實用程式使背景圖片與容器和視窗一起滾動
滾動內容以查看與容器一起滾動的背景圖片
因為郵件永遠不會停止。它只是一直來一直來一直來，永遠不會停止。這是無情的。每天它都會堆積越來越多越來越多。你必須把它弄出去，但是你弄出去越多，它就越多地湧入。然後條碼掃描器壞了，今天是 Publisher's Clearing House 的日子。
— Newman
<div class="bg-[url(/img/mountains.jpg) bg-local ..."> <!-- ... --></div>與視窗一起滾動
使用 bg-scroll 實用程式使背景圖片與視窗一起滾動，但不與容器一起滾動
滾動內容以查看固定在容器中的背景圖片
因為郵件永遠不會停止。它只是一直來一直來一直來，永遠不會停止。這是無情的。每天它都會堆積越來越多越來越多。你必須把它弄出去，但是你弄出去越多，它就越多地湧入。然後條碼掃描器壞了，今天是 Publisher's Clearing House 的日子。
— Newman
<div class="bg-[url(/img/mountains.jpg) bg-scroll ..."> <!-- ... --></div>響應式設計
前綴a background-attachment 實用程式 使用像 md: 這樣的斷點變體，僅在以下情況下應用該實用程式中等 螢幕尺寸及以上
<div class="bg-local md:bg-fixed ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
