背景
用于控制背景图片在滚动时的行为方式的工具。
¥Basic usage
¥Fixed
使用 bg-fixed
相对于视口固定背景图片。
¥Use bg-fixed
to fix the background image relative to the viewport.
<div class="bg-fixed ..." style="background-image: url(...)"></div>
¥Local
使用 bg-local
滚动背景图片与容器和视口。
¥Use bg-local
to scroll the background image with the container and the viewport.
<div class="bg-local ..." style="background-image: url(...)"></div>
¥Scroll
使用 bg-scroll
滚动背景图片与视口,但不与容器。
¥Use bg-scroll
to scroll the background image with the viewport, but not with the container.
<div class="bg-scroll ..." style="background-image: url(...)"></div>
Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:bg-fixed
仅在 hover 时应用 bg-fixed
工具。
<div class="bg-local hover:bg-fixed">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。
你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:bg-fixed
仅在中等屏幕尺寸及以上时应用 bg-fixed
工具。
<div class="bg-local md:bg-fixed">
<!-- ... -->
</div>