Bootstrap 3 – jumbotron 背景影像效果

問題描述

嗨，我試圖建立一個擁有背景影像的 jumbotron 的網站，這本身並不難：

HTML：

<div class="jumbotron">
...
</div>

CSS：(它位於我的自定義 css 檔案，並且在 CSS 之後載入) 。

.jumbotron {
    margin-bottom: 0px;
    background-image: url(../img/jumbotronbackground.jpg);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    text-shadow: black 0.3em 0.3em 0.3em;
}

現在這建立了一個具有背景影像的 jumbotron，但是我想讓它做一個我覺得很難描述的效果，但是在這個網頁上看到：http://www.andrewmunsell.com 您可以看到當您滾動 jumbotron 內容文字等滾動比背景影像快。這個效果是什麼，並且使用 bootstrap /html /css 輕鬆實現？

我已經看了一下工資的 HTML，但是我現在有點太複雜了。

謝謝，本。

編輯：我試圖透過第一個答案提供的例子來獲得效果，第一個答案位於引導層。

然而對於我來說，背景影像顯示出來，然後一滾動即使一點點，整個影像消失。如果我使用野生動物園的慣性滾動來嘗試滾動超出頁面頂部，背景將再次向下移動到檢視中，所以我認為影像被正確載入，然後一旦滾動一下，高度就是在這樣的操作中，影像完全被螢幕移動。以下是我的 HTML(在標籤放置的地方有點醜陋，但 Jekyll 把它放在一起，包括 Jumbotron 標題，我試圖為頁面內容和一個頁面頁尾建立視差效果。

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hybridisation Recombination and Introgression Detection and Dating</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Site for the HybRIDS R package for analysing recombination signal in DNA sequences">
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="css/custom.css" type="text/css"/>
    <style>
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type='text/javascript'>
        var jumboHeight = $('.jumbotron').outerHeight();
        function parallax(){
            var scrolled = $(window).scrollTop();
            $('.bg').css('height', (jumboHeight-scrolled) + 'px');
        }
        $(window).scroll(function(e){
            parallax();
        });
    </script>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></sc
ript>
    <![endif]-->
  </head>

  <body>
    <div class="bg"></div>
    <div class="jumbotron">
        <div class="row">
            <div class="col-lg-4">
                <img src="./img/HybRIDSlogo.png" class="img-rounded">
            </div>
            <div class="col-lg-8">
                <div class="page-header">
                    <h2> Hybridisation Recombination and Introgression Detection and Dating </h2>
                    <p> <h2> <small> Easy detection, dating, and visualisation for recombination, introgression and hybridisation events in genomes. </small> </h2> </p>
                </div>
            </div>
        </div>
    </div>
    <!-- End of JumboTron -->

    <div class="container">

        PAGE CONTENT HERE

    <!-- Close the container that is opened up in header.html -->
    </div>
    </body>
</html>

你看到我已經把 Javascript 附近放在了頂部，而 bg 的 div 和 jumbotron 的 div 。

我的 CSS 是：

body {
    background-color: #343b49;
    padding-bottom: 100px;
}

.bg {
  background: url('../img/carouelbackground.jpg') no-repeat center center;
  position: fixed;
  width: 100%;
  height: 350px; 
  top:0;
  left:0;
  z-index: -1;
}

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

最佳解決方案

示例：http://bootply.com/103783

實現這一點的一種方法是使用 position:fixed 容器作為背景影像，並將其放置在.jumbotron 之外。使 bg 容器與.jumbotron 的高度相同，並將背景影像居中：

background: url('/assets/example/...jpg') no-repeat center center;

CSS

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

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

然後在視窗滾動時使用 jQuery 來減小.jumbtron 的高度。由於背景影像在 DIV 中居中，因此會相應地進行調整 – 產生視差影響。

JavaScript 的

var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
    var scrolled = $(window).scrollTop();
    $('.bg').css('height', (jumboHeight-scrolled) + 'px');
}

$(window).scroll(function(e){
    parallax();
});

演示

http://bootply.com/103783

次佳解決方案

在檢查您提供的示例網站後，我發現作者可能會透過使用一個名為 Stellar.js 的庫來實現效果，看看 Library 網站，歡呼！

參考文獻

Bootstrap 3 – jumbotron background image effect

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

Bootstrap 3 – jumbotron 背景影像效果