我试图让3个图像循环作为Bootstrap 3 jumbotron的背景.但问题是我在jumbotron中有3个div,到目前为止我尝试的所有解决方案都要求我将jumbotron的位置改为相对和背景图像为绝对.而且因为我试图保持网站的响应能力,所以这样做会严重影响较小规模的外观.
我还尝试通过使jumbotron绝对和旋转木马相对来将旋转木马放在旋转木马上.在较小的屏幕尺寸下再次出现相同的缩放问题.
是否有捷径可寻?
编辑:我希望我的背景改变类似于这个网站:http://www.in-toronto-web-design.ca/并让它也适当缩放.
我的代码:
<!--begin jumbotron-top-->
<div class="jumbotron" id="jumbotron-top">
<!--navigation bar-->
<div class="row">
<nav class="navbar navbar-default transparent" id="navbar-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down fa-2x"></span> <b>Menu</b>
</button>
</div>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav nav-stacked main-nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
<hr>
</div>
</nav>
</div>
<!--end nav bar-->
<h1>Heading</h1>
<div class="container">
<p>Content</p>
<a class="btn btn-lg btn-success fp-buttons" href="#"> …Run Code Online (Sandbox Code Playgroud)