Наложение div на jumbotron

Question

Я полный noob с программированием. Я работаю над проектом, и я не могу понять последнюю часть. Я использую bootstrap для создания jumbotron, и я хочу создать наложение с текстовой информацией. Ниже мой код.

Спасибо.

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

Answer 1

Вы не совсем ясно, но, если я вас правильно, вы можете просто сделать наложение position: absolute и добавить top: 0; left: 0; right: 0; bottom: 0;. Если это еще не сделано, ваш jumbotron должен быть position: relative;. С помощью этой техники ваш оверлей будет такого же размера, как ваш jumbotron. В зависимости от того, что вы действительно пытаетесь сделать, вам может потребоваться добавить более высокий z-index к наложению.

Answer 2

Как насчет добавления класса к JumboTron как

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

таким образом, что вы положили на него будет над вашим изображением.