向下滾動時，Jumptron背景圖像消失

Question

我正在使用bootstrap jumptron和背景圖片。 當我向下滾動時，背景圖像消失，而Jumptron div類僅顯示標題。 如何修復，所以當我向下滾動圖像時不會消失。 其他內容正常工作，以下文件提供了更多詳細信息。 以下文件位於Rails 5應用程序中。

index.html.erb

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

bootstrap_and_overrides.css

 /* =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; } 

和cable.js

 // Action Cable provides the framework to deal with WebSockets in Rails. // You can generate new channels where WebSocket features live using the rails generate channel command. // //= require action_cable //= require_self //= require_tree ./channels (function() { this.App || (this.App = {}); App.cable = ActionCable.createConsumer(); }).call(this); var jumboHeight = $('.jumbotron').outerHeight(); function parallax(){ var scrolled = $(window).scrollTop(); $('.bg').css('height', (jumboHeight-scrolled) + 'px'); } $(window).scroll(function(e){ parallax(); }); 

這是我滾動頁面之前的圖像：

Answer 1

您不應該將圖像作為超大背景燈的背景，這不是它的用途。

取而代之的是，使超大屏幕背景顏色透明，然后將背景圖像添加到容器外部的div中。

即。 在HAML中

#YourDivToApplyBackground
    .container
        .row
            .col-md-12
                .jumbotron
                    %h1 Your Page Title

這是您的代碼應尋找引導程序的方式。