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 背景图像效果