1. 背景
  2. background-attachment

背景

背景附着

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

ClassStyles
bg-fixed
background-attachment: fixed;
bg-local
background-attachment: local;
bg-scroll
background-attachment: scroll;

示例

固定背景图像

使用 bg-fixed 工具类将背景图像相对于视口固定:

滚动内容以查看背景图像固定在原位

我的登顶之旅
2021年11月16日 · 4分钟阅读

也许我们可以没有图书馆,像你我这样的人。也许吧。当然,我们太老了,无法改变世界, 但是那个正坐着,翻开书,现在,在当地图书馆的一个分馆里,在《戴帽子的猫》和《五个中国兄弟》上发现尿尿和小便涂鸦的孩子呢?他不应该得到更好的吗?

听着。如果你认为这是关于逾期罚款和丢失书籍的事,你最好再想想。这是关于那个孩子 阅读书籍而不让他的思想被扭曲的权利!或者:也许这让你兴奋,宋飞;也许这就是你获得快感的方式。你和你的狐朋狗友。

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

与容器一起滚动

使用 bg-local 工具类使背景图像随容器和视口一起滚动:

滚动内容以查看背景图像随容器一起滚动

因为邮件永远不会停止。它只是一直在来,一直在来,一直在来,从来没有松懈。它是无情的。 每天它越堆越多,越堆越多。你必须把它送出去,但你送出去的越多,它进来的就越多。 然后条码阅读器坏了,今天是出版商信息交换所的日子。

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

与视口一起滚动

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

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

因为邮件永远不会停止。它只是一直在来,一直在来,一直在来,从来没有松懈。它是无情的。 每天它越堆越多,越堆越多。你必须把它送出去,但你送出去的越多,它进来的就越多。 然后条码阅读器坏了,今天是出版商信息交换所的日子。

— 纽曼
<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