另一个 CSS 背景图像没有显示，是我的代码错误吗？

Posted 2023-03-05

【中文标题】另一个 CSS 背景图像没有显示，是我的代码错误吗？

【英文标题】：Another CSS background image not showing, is my code wrong?

【发布时间】：2021-11-07 15:18:08

【问题描述】：

大家好，

我一直在到处寻找以解决这个问题。但我做不到，这让我相信还有其他事情发生。让我们看看。

我希望为我的 Wordpress Bootstrap 网站上的横幅编写代码。 www.visionalmind.com 这个横幅应该放在导航栏的正下方，为此我在一个全宽容器内制作了一个。该类包括图像本身。

我的愿望是制作这样的横幅： https://www.w3schools.com/Css/tryit.asp?filename=tryresponsive_image_background3

这是 header_banner 的 CSS：

.header_banner
  max-width: 100%!important;
  margin: auto!important;
  width: 100%!important;
  max-height: 1080px!important;
  background-repeat: no-repeat!important;
  background-attachment: fixed!important;
  background-size:cover!important;
  background-image: url('https://www.visionalmind.com/wp-content/themes/visionaltheme/media/photo-1499951360447-b19be8fe80f5.png');

html：

<div class="container-fluid bg-darkblue">
  <div class="row mt-5">
    <div class="container pad_over">
      <a class="header_banner"></a>
    </div>
  </div>
</div>

我尝试了以下方法。

尝试使用“背景”属性代替“背景图像” 财产。 尝试使用 HTML 代替 This works，但我 得到伸展问题。我对想法持开放态度。 我已经在我的 url 栏中加载了 URL，以检查图像是否有效。

【问题讨论】：

您的标题横幅没有高度...

... 宽度也为零。

你试图给锚标签提供背景 尝试改变它，使用

感谢大家的反馈。我已经全部实现了，但仍然没有结果。

【参考方案1】：

这里有一些小问题。您试图将背景附加到“a”标签而不是“div”，并​​且您也没有为其分配高度。

#headerBanner 
  width: 100%;
  height: 400px;
  max-width: 100%;
  max-height: 1080px;
  background-image: url('https://www.visionalmind.com/wp-content/themes/visionaltheme/media/photo-1499951360447-b19be8fe80f5.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

<div class="container-fluid bg-darkblue">
  <div class="row mt-5">
    <div class="bannerContainer pad_over">
      <div id="headerBanner"></div>
    </div>
  </div>
</div>

检查它在 JSFiddle

上的工作情况

【讨论】：

嘿，谢谢你的遮阳篷！由于引导程序的工作原理，我只需要将bannerContainer 更改为col-12。但在那之后，它奏效了！谢谢！