背景
用于控制背景图片在滚动时的行为方式的工具。
¥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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-fixed
to only apply the bg-fixed
utility on hover.
<div class="bg-local hover:bg-fixed">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:bg-fixed
to apply the bg-fixed
utility at only medium screen sizes and above.
<div class="bg-local md:bg-fixed">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.