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

ilee 发表于 Dev

伊利

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

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

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

吉什努VS

只需尝试使用此代码段，我已更改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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。