求助：使用Tailwind CSS设置Div本地背景图无法显示

核心问题排查 #

• 你用img标签能正常显示图片，说明/wave.svg路径是正确的，问题不在路径本身。
• 背景图不显示的常见原因：容器无明确高度、Tailwind类与行内样式冲突、缓存问题。

解决方案 #

方案1：用Tailwind自定义背景图类（推荐）

Tailwind默认没有内置自定义背景图类，需先在tailwind.config.js中配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 根据你的项目实际路径调整
  theme: {
    extend: {
      backgroundImage: {
        'wave': "url('/wave.svg')",
      },
    },
  },
  plugins: [],
}

然后修改HTML代码，移除行内style属性，直接用自定义类：

<div class="block bg-wave bg-repeat-x bg-contain h-16">
  <!-- 你的内容 -->
</div>

方案2：保留行内样式，修复容器高度

如果不想修改配置，确保容器有明确高度（背景图需要高度才能显示，img标签自带尺寸但div默认没有），同时避免样式冲突：

<div style="background-image: url('/wave.svg');" class="block bg-repeat-x bg-contain h-16">
  <!-- 你的内容 -->
</div>

关键注意点 #

• 必须给div设置高度：用h-16、h-[60px]这类Tailwind高度类，或者自定义行内样式高度，否则容器高度由内容撑开，若内容过少会导致背景图不可见。
• 清除缓存：重启开发服务器或清空浏览器缓存，避免资源加载异常。
• 避免重复设置背景属性：不要同时用Tailwind的bg-*背景图类和行内background-image，防止样式冲突。

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