Bootstrap 3 - jumbotron背景图象作用

嗨,我正在尝试建立一个带有背景图像的jumbotron网站,这本身并不难:

HTML:

...

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:

  
    
    
    
    
    
    
    
    
    
    
    
    
  

  
    

    

        

            

                
            
            

                

                    
 Hybridisation Recombination and Introgression Detection and Dating 
                    
 
  Easy detection, dating, and visualisation for recombination, introgression and hybridisation events in genomes.  
 

                
            
        
    
    

    


        PAGE CONTENT HERE

    
    
    

你看到我在顶部附近的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;
}

Zim.. 63

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