如何使用TailwindCSS使背景图相对于所在div固定？

首先明确：Tailwind的bg-fixed类本质是相对于浏览器视口固定背景，和你要让背景绑定在所属div的需求完全冲突，必须移除这个类。

要实现背景图固定在网格项底部中央，分两种场景处理：

静态定位（仅固定位置，无需适配容器滚动） #

直接用背景定位类即可：

<div class="grid-item bg-[url('你的图片路径')] bg-bottom bg-center bg-no-repeat">
  <!-- 网格项内容 -->
</div>

• bg-bottom bg-center：精准把背景图定位到容器的底部中央。
• bg-no-repeat：防止背景图重复显示（按需省略）。

容器滚动时背景保持固定 #

如果网格项内部有滚动内容，需要背景图始终固定在容器底部中央不随内容滚动，使用bg-local类（Tailwind v3及以上版本支持）：

<div class="grid-item bg-[url('你的图片路径')] bg-bottom bg-center bg-no-repeat bg-local overflow-auto">
  <!-- 可滚动的内容 -->
</div>

• bg-local：让背景图相对于容器本身固定，容器内容滚动时背景位置不变。
• overflow-auto：开启容器的滚动功能（根据实际布局调整）。

内容的提问来源于stack exchange，提问作者hipsterstomper69