Bootstrap 3 - jumbotron背景图像效果 [英] Bootstrap 3 - jumbotron background image effect
问题描述
您好，我试图建立一个带有背景图片的jumbotron网站，其本身并不困难：
Hi I'm trying to build a site with a jumbotron with a background image, which in itself is not hard:
HTML：
<div class="jumbotron">
...
</div>
CSS：（它位于我的自定义css文件中， p>
CSS: (which lies in my custom css file and is loaded after all over 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实现？
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.com You 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?
我已经看了工资的HTML，但是有点太
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.
感谢，
Ben。
Thanks, Ben.
尝试通过位于引导层的第一个答案提供的示例获得效果。
I tried to get the effect by an example provided by the first answer, which is located at boot ply.
但是对于我来说，背景图片显示出来，然后一个滚动甚至一点点，整个图像消失。如果我使用safari的惯性滚动来尝试和滚动超出页面的顶部，背景尝试再次向下移动到视图，所以我认为图像加载正确，然后一旦滚动，甚至一点点，高度是在这样远处操作的图像被完全移动屏幕。下面是我的HTML，（一个有点丑的地方放置标签，但Jekyll通过包括Jumbotron标题我试图使视差效果，页面内容和页脚。通过它在一起。
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.
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。
You see where I'v included the Javascript near the top and the div of class bg and then the 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 的高度相同，并将背景图片置中：
Example: http://bootply.com/103783
One way to achieve this is using a position:fixed container for the background image and place it outside of the .jumbotron. Make the bg container the same height as the .jumbotron and center the background image:
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为中心，因此会相应调整 - 产生视差效果。
Then use jQuery to decrease the height of the .jumbtron as the window scrolls. Since the background image is centered in the DIV it will adjust accordingly -- creating a parallax affect.
JavaScript
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
演示
这篇关于Bootstrap 3 - jumbotron背景图像效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
