Html Bootstrap 3 - jumbotron 背景图片效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20914711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - jumbotron background image effect
提问by Ward9250
Hi I'm trying to build a site with a jumbotron with a background image, which in itself is not hard:
嗨，我正在尝试使用带有背景图像的超大屏幕构建一个站点，这本身并不难：
HTML:
HTML：
<div class="jumbotron">
...
</div>
CSS: (which lies in my custom css file and is loaded after all over css).
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;
}
Now this creates a jumbotron with a background image, but I would like to get it to do an effect which I find hard to describe but is seen on this webpage here: http://www.andrewmunsell.comYou can see as you scroll the jumbotron content text etc sort of scrolls up faster than the background image. What is this effect called and is it easy to achieve with bootstrap/html/css?
现在这会创建一个带有背景图像的超大屏幕，但我想让它产生一种难以描述的效果，但可以在此网页上看到：http: //www.andrewmunsell.com您可以在滚动时看到jumbotron 内容文本等的滚动速度比背景图像快。这个效果叫什么，用bootstrap/html/css容易实现吗？
I've had a look at the HTML of the pay but it's a bit too complex for me to follow at the moment.
我已经查看了工资的 HTML，但目前对我来说有点太复杂了。
Thanks, Ben.
谢谢，本。
EDIT: I tried to get the effect by an example provided by the first answer, which is located at boot ply.
编辑：我试图通过位于引导层的第一个答案提供的示例来获得效果。
However for me the background image shows up, and then as soon as a scroll even a little bit, the whole image disappears. If I use safari's inertial scroll to try and scroll beyond the top of the page, the background tries to move down into view again, so I think the image is loaded correctly, then as soon as a scroll even a little bit, the height is being manipulated in such away the image is moved totally of screen. Below is my HTML, (a little bit ugly in where tabs are placed but Jekyll put it together by including the Jumbotron header I'm trying to make the parallax effect for, page content, and a page footer.
但是对我来说，背景图像出现了，然后只要滚动一点点，整个图像就会消失。如果我使用 safari 的惯性滚动来尝试滚动到页面顶部之外，背景会尝试再次向下移动到视图中，所以我认为图像已正确加载，然后只要滚动一点，高度就会在如此远的地方被操纵，图像完全移动到屏幕之外。下面是我的 HTML，（在放置选项卡的位置有点难看，但 Jekyll 通过包含我试图为页面内容和页面页脚制作视差效果的 Jumbotron 标题将它们组合在一起。
HTML:
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>
You see where I've included the Javascript near the top and the div of class bg and then the jumbotron.
你会看到我在顶部附近包含了 Javascript 和 bg 类的 div，然后是 jumbotron。
My CSS is:
我的 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;
}
回答by Zim
Example: http://bootply.com/103783
示例：http: //bootply.com/103783
One way to achieve this is using a position:fixedcontainer for the background image and place it outside of the .jumbotron. Make the bgcontainer the same height as the .jumbotronand center the background image:
实现此目的的一种方法是使用position:fixed背景图像的容器并将其放置在.jumbotron. 使bg容器与.jumbotron背景图像高度相同并居中：
background: url('/assets/example/...jpg') no-repeat center center;
CSS
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;
}
Then use jQuery to decrease the height of the .jumbtronas the window scrolls. Since the background image is centered in the DIV it will adjust accordingly -- creating a parallax affect.
然后使用 jQuery 降低.jumbtron窗口滚动时的高度。由于背景图像在 DIV 中居中，它会相应地进行调整——产生视差效果。
JavaScript
JavaScript
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
Demo
演示
回答by pikachu0
After inspecting the sample website you provided, I found that the author might achieve the effect by using a library called Stellar.js, take a look at the library site, cheers!
看了你提供的示例网站，发现作者可能是用了一个叫做Stellar.js的库来实现的，看看这个库站点，加油！
回答by rbhojan
I think what you are looking for is to keep the background image fixed and just move the content on scroll. For that you have to simply use the following css property :
我认为您正在寻找的是保持背景图像固定并在滚动时移动内容。为此，您必须简单地使用以下 css 属性：
background-attachment: fixed;
背景附件：固定；
