Overlaying div across jumbotron

时间:2015-07-31 20:52:32

标签: css twitter-bootstrap

I'm a complete noob with programming. I am working on a project and I can't figure out the last piece. I am using bootstrap to create a jumbotron and I want to create an overlay with text information. Below is my code.

Thanks.

<div class="jumbotron" style="background-color: white;" >
    <img class="img-responsive"  src="images/sanDiegFallback.png"> 
        <div class="overlay">
            <h1>ReCon 2015</h1>
                    <div class="fadeInDown">
                        <p>October 14-16, 2015</p>
                    </div>
                    <div class="fadeInDown2">
                      <p>Marriott Marquis<br />San Diego, CA</p>
                    </div>
                    <div class="fadeInDown3">
                     <p>Registration open now<br />
                        <span style="font-size: 14px; line-height: 18px;">(Watch your inbox for details)</span>
                    </div>
                    <div class="fadeInDown4">
                     <a class="cta" href="https://twitter.com/intent/tweet?text=Save+the+date+for+%23ReCON2015+in+San+Diego%3A+October+14-15+http://is.gd/FkQv3k+%40SVISanDiego" style="background-color:none;
                background-image: src(images/twitter_bg.png);
                border:2px solid #ffffff;
                border-radius:25px;
                color:#ffffff;
                display:inline-block;
                font-family: 'proxima_nova_rgregular', Helvetica, Arial, sans-serif;
                font-size:18px;
                line-height: 18px;
                text-decoration:none;
                padding: 15px 35px;
                text-indent: 20px;
                " target="_blank">Share on Twitter</a>
                    </div>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

你不是很清楚,但如果我找到你,你可以制作叠加层position: absolute并添加top: 0; left: 0; right: 0; bottom: 0;。如果还没有,你的jumbotron必须是position: relative;。 使用这种技术,您的叠加层将与您的超大屏幕相同。根据您真正想要做的事情,您可能需要向叠加层添加更高的z-index

答案 1 :(得分:0)

如何将类添加到jumbotron,如

.jumbotron .withImage{
   background: url(../pathToImage);
   background-size:contain;
}

无论你放在它上面的是什么,都会超过你的形象。