Question

您好我正在尝试使用带有背景图像的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了，但现在跟我有点太复杂了。

谢谢，本。

编辑：我试图通过第一个答案提供的示例来获得效果，该答案位于引导层。

然而对我来说，背景图像显示出来，然后只要滚动一点点，整个图像就会消失。如果我使用safari的惯性滚动尝试滚动超出页面顶部，背景会再次向下移动到视图中，所以我认为图像是正确加载的，然后只要滚动一点点，高度就是在这样的情况下操纵图像完全移动屏幕。下面是我的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。

我的CSS是：

body {
    background-color: #333333;
    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;
}

Answer 1

示例：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

Answer 2

在检查了您提供的示例网站后，我发现作者可能通过使用名为Stellar.js的库来实现效果，看看图书馆网站，欢呼！

Answer 3

我认为你要找的是保持背景图像固定，只是在滚动时移动内容。为此，您只需使用以下css属性：

background-attachment：fixed;

Bootstrap 3 - jumbotron背景图象作用

3 个答案:

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