背景图像没有显示在带有Tailwind css的style.css上

Question

我正在使用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;
}

Answer 1

试着这样使用它：

<div class="bg-[url('../public/images/hero.jpg')]"></div>

Answer 2

将您的自定义样式放在顺风声明下方。像这里：

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

Answer 3

尝试使用Tailwindbg-实用程序类添加背景图像：

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

Answer 4

您可以将背景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编译器的Tailwind CSS v3.x。