background-attachment

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

类名样式

类名	样式
`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;

示例

使用 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>

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