CSS 使用 Bootstrap 时背景图片未出现

Question

我是网络开发的新手，一直在尝试使用 Bootstrap 创建一个网站，托管在 github 上。我正在使用的 bootstrap 主题有一个 header 部分，我试图用背景图像覆盖它（它最初只是纯色），但是图像没有出现。

这是我的代码： HTML - header 部分：

<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" 文件夹位于同一目录中] 文件。我尝试了以下方法：

将url改为“/img/banner.jpg”、“../img/banner.jpg”和"img/banner.jpg"（我觉得第一个还是对的？ )
删除#banner id 并将所有内容放在 css 下的 header.masthead 单独
删除宽度和高度
仔细检查文件名（banner.jpg）

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

Answer 1

你不能在 background-image 上有 no-repeat and cover，因为它们是 background 的属性。因此，您只能在 background-image 上使用图像 url。

并尝试删除 header.masthead 上的后备 background。

尝试以下 [fiddler][1] 以供参考。

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

Answer 2

只需尝试使用此代码段，我已将 background-image 更改为 background 并删除了 header

的 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>

CSS 使用 Bootstrap 时背景图片未出现

Background image not appearing in CSS using Bootstrap

html

css

background-image

twitter-bootstrap