将jumbotron混合到背景图像中

Question

所以我试着把我的巨型加速器和背景图像混在一起。我只想让文本可见，而不是巨型加速器本身的白色背景。我试着使用了background:none和background-color: transparent，但都无济于事。有人能帮上忙吗？

​

body, html {
  height: 100%;
  background-color: #fff;
}

.bg {
  background-image: url("../images/home-office.jpg");

  height: 100%;    

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron {
    background: none;
}

<!--********TOP JUMBOTRON********-->

    <header class="jumbotron bg" id="landing-view">
            <div class="container top">
                <h1 class='name'>Conor Humphreys</h1>
                <p class='title'>Full-Stack Software Developer</p>
            </div>
    </header>

​

Answer 1

您正在覆盖div的background当您设置.jumbotron {background: none}时，您应该在CSS中将.jumbotron {background: none}移到.bg选择器的上方。

Answer 2

希望这是一个解决这个问题的合适方法：

我按照@damnitrahul的建议更改了代码(参见代码片段)，它按照他的指示工作。由于此代码片段无法访问图像，因此我添加了红色背景色。

​

body, html {
  height: 100%;
  background-color: #fff;
}

.jumbotron {
    background: none;
}

.bg {
  background-image: url("../images/home-office.jpg");

  height: 100%;    

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: red;
}

<!--********TOP JUMBOTRON********-->

    <header class="jumbotron bg" id="landing-view">
            <div class="container top">
                <h1 class='name'>Conor Humphreys</h1>
                <p class='title'>Full-Stack Software Developer</p>
            </div>
    </header>

​

为了测试这一点，编辑这段代码，在你的css中将.bg移到.jumbotron之上，就像你拥有它一样，你会看到红色的背景消失了。

我相信你没有看到结果，因为你的镜像路径或文件名不正确，所以你听从了@ your的建议。

请对@damnitrahul的回答投上任何赞成票。