1. 背景
  2. background-attachment(背景附着)

背景

background-attachment

用于控制背景图片在滚动时的行为方式的工具类。

ClassStyles
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 工具类可以让背景图片随容器和视口一起滚动:

滚动内容以查看背景图片随容器滚动

因为邮件永远不会停止。它只是不断地来、来、来,从来没有停歇。它是无情的。每天它堆积得越来越多。你必须把它处理掉,但你处理得越多,它来得就越多。然后条码阅读器坏了,而那天正好是出版商清算日。

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

随视口滚动

使用 bg-scroll 工具类可以让背景图像随视口滚动,但不随容器滚动:

滚动内容以查看固定在容器中的背景图像

因为邮件永远不会停止。它只是不断地来、来、来,从来没有停歇。它是无情的。每天它堆积得越来越多、越来越多。你必须把它弄出去,但你弄出去的越多,它进来的就越多。然后条码阅读器坏了,而那天正好是出版商结算日。

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

响应式设计

Prefix a background-attachment utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy