背景附着属性

背景附着属性

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

Class Styles

Class	Styles
`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>

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.