带有 Tailwind CSS 的 style.css 上没有显示背景图片答案

【问题标题】：Background image not showing up on style.css with Tailwind CSS带有 Tailwind CSS 的 style.css 上没有显示背景图片
【发布时间】：2022-03-23 12:46:08
【问题描述】：

我正在使用 Tailwind CSS 和 JS 创建一个 HTML 网站。我在 styles.css 中添加了一张图片，但它没有显示出来。

<div class="main-section flex-1">
  <div class="main-section-banner h-44">
  </div>
</div>

.main-section-banner {
  background-image: url("images/amazonbanner.jpg");
  background-position: center;
  background-size: cover;
}

【问题讨论】：

设置父类的宽度没有宽度。如果父级有，则在代码编辑器中使用代码属性提及源代码
你试过给你的main-section-banner 一个宽度和一个高度，例如w-44?
还要确保图像路径实际上是正确的：检查开发工具中的浏览器网络选项卡，看看图像是否实际加载。

标签： html css tailwind-css

【解决方案1】：

将您的客户风格放在顺风声明的下方。喜欢这里：

@tailwind base;
@tailwind components;
@tailwind utilities;

.main-section-banner{
    background-image: url("https://via.placeholder.com/500");
    background-position: center;
    background-size: cover;
}

【讨论】：

Tailwind css 是通过 intex.html 文件中的 cdn 初始化的.. 是否需要在 style.css 中添加这行代码？？
@sanjaydamodharan 好的。那么就没有必要了！然后注意自定义样式已经加载。将指向您的自定义 css 的链接放在 taildwind cdn 链接上方。那么就可以工作了...

【解决方案2】：

尝试使用 Tailwind bg- 实用程序类来添加您的背景图片：

<div class="main-section flex-1">
  <div class="bg-[url('https://via.placeholder.com/500')] h-44">
  </div>
</div>

【讨论】：

【解决方案3】：

您可以像这样将背景 css 内联：

<div class="main-section flex-1">
  <div class="h-44 bg-center bg-cover" style="background-image: url('https://via.placeholder.com/500')">
  </div>
</div>

如果您想使用任意值，请确保您使用的是带有 JIT compiler 的 Tailwind CSS v3.x。

【讨论】：

【解决方案4】：

我以前也遇到过这种情况。我建议将它放在 html 文件的头部。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。