Bootstrap 3 – jumbotron背景图像效果
嗨，我试图build立一个与一个背景图像，这本身并不难的一个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; }
现在创build一个带有背景图像的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; }
例如： 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(); });
演示
在查看了您提供的示例网站之后，我发现作者可能会通过使用一个名为Stellar.js的库来实现这个效果，请看图书馆网站，欢呼！
我认为你正在寻找的是保持背景图像固定，只是滚动内容。 为此，你只需要使用下面的CSS属性：
background-attachment：fixed;
