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

chhqkbe1 于 2023-01-14 发布在其他

关注(0)|答案(5)|浏览(197)

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

css

来源：https://stackoverflow.com/questions/70731071/background-image-not-showing-up-on-style-css-with-tailwind-css

5条答案

按热度按时间

tv6aics11#

把你的定制风格放在你的顺风宣言下面。就像这样：

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

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

赞(0）回复(0）举报 2023-01-14

f0ofjuux2#

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

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

赞(0）回复(0）举报 2023-01-14

hpxqektj3#

你可以把你的背景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。

赞(0）回复(0）举报 2023-01-14

5m1hhzi44#

试着像这样使用它：

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

赞(0）回复(0）举报 2023-01-14

eeq64g8w5#

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

赞(0）回复(0）举报 2023-01-14

我来回答

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

5条答案

相关问题

热门标签

最新问答