使用 Bootstrap 没有出现在 CSS 中的背景图像

Question

我对 Web 开发还很陌生，一直在尝试使用托管在 github 上的 Bootstrap 创建一个网站。我正在使用的引导主题有一个标题部分，我试图用背景图像覆盖它（它最初只是纯色），但是图像没有出现。

这是我的代码： HTML - 标题部分：

<header class="masthead" id="banner">
  <div class="container">
    <div class="col-lg-12 text-center">
      <img class="img-fluid" src="img/headshot.png" alt="Headshot">
      <div class="intro-text">
        <span class="name">NAME</span>
        <hr class="star-light">
      </div>
    </div>
  </div>
</header>

CSS：

header.masthead {
  text-align: center;
  color: white; 
  background: #148ABC;}

#banner {
  background-image: url("/img/banner.jpg") no-repeat center; 
  background-size: cover; 
  width: 100%;
  height: 100%; }

作为背景图像的我的"banner.jpg" 文件位于“img”文件夹中，该文件夹与包含实际css 文件的“css”文件夹位于同一目录中。我尝试了以下方法：

• 将网址更改为“/img/banner.jpg”、“../img/banner.jpg”和“img/banner.jpg”（我认为第一个仍然正确？）
• 删除#banner id 并将所有内容放在 css 中的 header.masthead 下
• 删除宽度和高度
• 仔细检查文件名（它是banner.jpg）

我已经为此工作了好几天，所以我对自己感到非常沮丧。感谢您的帮助！

Answer 1

试试这个 sn-p ，我已将 background-image 更改为 background 并删除了标题的 background color

header.masthead {
  text-align: center;
  color: white; 
}

#banner {
  background: url("https://www.w3schools.com/css/trolltunga.jpg") center center no-repeat; 
  background-size: cover; 
  width: 100%;
  height: 100%; }

<header class="masthead" id="banner">
  <div class="container">
    <div class="col-lg-12 text-center">
      <img class="img-fluid" src="img/headshot.png" alt="Headshot">
      <div class="intro-text">
        <span class="name">NAME</span>
        <hr class="star-light">
      </div>
    </div>
  </div>
</header>

Answer 2

你不能在background-image 上拥有no-repeat and cover，因为它们是background 的财产。所以你只能在background-image 上拥有图像url。

还可以尝试在header.masthead 上删除后备background。

试试下面的 [fiddler][1] 以供参考。

  [1]: https://jsfiddle.net/rajsnd08/qcwvet4p/