如何添加标题背景图片？ - MeteorJS答案

【问题标题】：How can I add the header background image? - MeteorJS如何添加标题背景图片？ - MeteorJS
【发布时间】：2018-04-08 06:42:26
【问题描述】：

我在 Meteor 项目中使用来自引导程序的 this 模板。

问题是标题背景图片没有出现。

应该设置标题背景的代码位于css/agency.css文件夹中，如下所示：

header.masthead {
  text-align: center;
  color: white;
  background-image: url("../img/header-bg.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这里是标题 HTML 脚本：

<header class="masthead">
  <div class="container">
    <div class="intro-text">
      <div class="intro-lead-in">Welcome To Our Studio!</div>
      <div class="intro-heading text-uppercase">It's Nice To Meet You</div>
      <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
    </div>
  </div>
</header>

我所做的是，我在我的根目录中创建了一个名为 public 的文件夹并将所有图像复制到那里。

然后我将background-image: url("../img/header-bg.jpg"); 更改为background-image: url("header-bg.jpg"); 然后background-image: url("../../public/header-bg.jpg"); 但两次尝试均无效。

我在这里做错了什么？

【问题讨论】：

如果您的 css 文件夹与公用文件夹处于同一级别，则它应该是 background-image: url("../public/header-bg.jpg");
@Hareesh 抱歉，这就是我尝试过的，我的错误没有意识到，抱歉，感谢您帮助我注意到它:)
浏览器开发者控制台出现错误？
@Hareesh 是的，很少，这是图片ibb.co/cHZKD6，但没有一个是由 Agency.css 引起的。您认为问题可能是由于控制台上的错误引起的吗？
你试过/img/header-bg.jpg吗？您的/public 文件夹应该被 Meteor 以/ 的形式公开到网络中。

标签： css twitter-bootstrap meteor bootstrap-4

【解决方案1】：

检查引导模板后，您必须将css/agency.css 中所做的更改更改为css/agency.min.css，它应该可以工作。

希望这会有所帮助

【讨论】：