1. 背景
  2. background-attachment

背景

background-attachment

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

样式
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>

响应式设计

前缀a background-attachment 实用工具 带有诸如 md: 之类的断点变体,仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

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

变体文档中了解有关使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策