当我向下滚动时，Jumptron背景图像消失了

Question

我正在使用bootstrap jumptron和背景图片。当我向下滚动时，背景图像消失，而jumptron div类仅显示标题。怎么能解决这个问题所以当我向下滚动图像时不会消失。其他内容正常，以下文件提供了更多详细信息。以下文件位于Rails 5应用程序中。

index.html.erb

＆＃13;

＆＃13;

vc

＆＃13;

＆＃13;

＆＃13;

bootstrap_and_overrides.css

＆＃13;

＆＃13;

<div class="bg"></div>
<div class="jumbotron">
  <h1>Organize and Mobilize</h1>
</div>

<div class="container">
  <div class="row">
    <h2>We need you to take action</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.
  </div>
  <hr>
  <div class="row">
    <h2>Page Content</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.
    <h2>Page Content</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.
    <h2>Page Content</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.

  </div>
  <hr>
  <div class="row">
    <h2>Page Content</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.
  </div>
</div>

<hr>

<div class="container">
	<div class="row">
      <div class="col-md-12 text-center"><p>The End.</p></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

和cable.js

＆＃13;

＆＃13;

/*
  =require twitter-bootstrap-static/bootstrap

  Static version of css will use Glyphicons sprites by default
  =require twitter-bootstrap-static/sprites
*/
body { padding-top: 50px; }

.bg {
  background: url('protest.jpg') no-repeat center center;
  position: fixed;
  width: 100%;
  height: 450px; /*same height as jumbotron */
  top:0;
  left:0;
  z-index: -1;
}

.jumbotron {
  margin-bottom: 50px;
  height: 350px;
  color: white;
  text-shadow: black 0.3em 0.3em 0.3em;
  background:transparent;
}

＆＃13;

＆＃13;

＆＃13;

这是滚动页面前的图像：

Answer 1

你不应该把图像作为jumbotron的背景，这不是它的用途。

相反，使jumbotron背景颜色透明，然后将背景图像添加到容器外部的div。

即。在HAML

u-pull-right

这是你的代码应该寻找bootstrap的方式。