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>
答案 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;
}
无论你放在它上面的是什么,都会超过你的形象。