Bootstrap 3 - jumbotron 背景图片效果 [英] Bootstrap 3 - jumbotron background image effect

查看：18
本文介绍了Bootstrap 3 - jumbotron 背景图片效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用带有背景图像的超大屏幕构建一个站点，这本身并不难:

HTML:

...

CSS:(它位于我的自定义 css 文件中，并在所有 css 之后加载).

.jumbotron {底边距:0px；背景图片:网址(../img/jumbotronbackground.jpg)；背景位置:0% 25%；背景尺寸:封面；背景重复:不重复；白颜色;文字阴影:黑色 0.3em 0.3em 0.3em；}

现在这会创建一个带有背景图像的超大屏幕，但我想让它产生一种难以描述的效果，但可以在此网页上看到:http://www.andrewmunsell.com当您滚动超大屏幕内容时，您可以看到文本等向上滚动的速度比背景图像快.这个效果叫什么，用bootstrap/html/css容易实现吗?

我已经查看了工资的 HTML，但目前它有点复杂，我无法理解.

谢谢，本.

我试图通过位于引导层的第一个答案提供的示例来获得效果.

但是对我来说，背景图像出现了，然后只要滚动一点点，整个图像就会消失.如果我使用 safari 的惯性滚动来尝试滚动到页面顶部之外，背景会尝试再次向下移动到视图中，所以我认为图像已正确加载，然后只要滚动一点，高度就会在如此远的地方被操纵，图像完全移动到屏幕之外.下面是我的 HTML，(放置选项卡的位置有点难看，但 Jekyll 通过包含我试图为页面内容和页面页脚制作视差效果的 Jumbotron 标题将它们组合在一起.

HTML:

<html lang="zh-cn"><头><meta charset="utf-8"><title>杂交重组和基因渗入检测和约会</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="用于分析 DNA 序列中重组信号的 HybRIDS R 包的站点"><link href="/css/bootstrap.css" rel="样式表"><link href="/css/bootstrap-responsive.css" rel="stylesheet"><link rel="stylesheet" href="css/custom.css" type="text/css"/><风格></风格><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();函数视差(){var scrolled = $(window).scrollTop();$('.bg').css('height', (jumboHeight-scrolled) + 'px');}$(window).scroll(function(e){视差()；});<!-- HTML5 shim，用于 IE6-8 对 HTML5 元素的支持 --><!--[如果是 IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></sc撕裂><![endif]--><身体><div class="bg"></div><div class="jumbotron"><div class="row"><div class="col-lg-4"><img src="./img/HybRIDSlogo.png" class="img-rounded">

<div class="col-lg-8"><div class="page-header"><h2>杂交重组和基因渗入检测和约会</h2><p><h2><小>基因组中重组、基因渗入和杂交事件的轻松检测、测年和可视化.</小></p>

<!-- JumboTron 结束--><div class="容器">页面内容在这里<!-- 关闭header.html中打开的容器-->

你看到我在顶部附近包含了 Javascript 和 bg 类的 div，然后是超大屏幕.

我的 CSS 是:

body {背景颜色:#333333；填充底部:100px；}.bg {背景: url('../img/carouelbackground.jpg') 无重复中心；位置:固定；宽度:100%；高度:350px；顶部:0；左:0;z-索引:-1；}.jumbotron {底边距:0px；高度:350px；白颜色;文字阴影:黑色 0.3em 0.3em 0.3em；背景:透明；}

解决方案

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

实现此目的的一种方法是使用 position:fixed 容器作为背景图像，并将其放置在 .jumbotron 之外.使 bg 容器与 .jumbotron 高度相同，并居中背景图像:

background: url('/assets/example/...jpg') no-repeat center center;

CSS

.bg {背景: url('/assets/example/bg_blueplane.jpg') 无重复中心；位置:固定；宽度:100%；高度:350px；/*与大屏幕高度相同*/顶部:0；左:0;z-索引:-1；}.jumbotron {底边距:0px；高度:350px；白颜色;文字阴影:黑色 0.3em 0.3em 0.3em；背景:透明；}

然后使用 jQuery 在窗口滚动时降低 .jumbtron 的高度.由于背景图像在 DIV 中居中，它会相应地进行调整 - 产生视差效果.

JavaScript

var jumboHeight = $('.jumbotron').outerHeight();函数视差(){var scrolled = $(window).scrollTop();$('.bg').css('height', (jumboHeight-scrolled) + 'px');}$(window).scroll(function(e){视差()；});

演示

http://bootply.com/103783

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: (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;
}

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?

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.

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.

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.

My CSS is:

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;
}

解决方案

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;
}

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();
});

Demo

http://bootply.com/103783

这篇关于Bootstrap 3 - jumbotron 背景图片效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆