我添加了猫头鹰旋转木马,我添加了滑块图像的背景图像。但它为所有浏览器的每个背景图像显示右侧的空白区域。我在下面尝试过以下代码:
<div class="main_slider">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item active ad1">
<div class="slider-inner">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="carousel-content">
<h2> <span>Lucayan</span> is the best Onepage Travel template </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna incididunt ut labore aliqua. </p> </div>
</div>
</div>
</div>
</div>
</div>
<div class="item ad2">
<div class="slider-inner">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="carousel-content">
<h2><span>Responsive </span> Designs Onepage Travel template</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna incididunt ut labore aliqua. </p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- This is End of item ad2 -->
</div>
CSS:
#main_slider .item {
display: block;
width: 100%;
height: 600px;
background-repeat: no-repeat;
background-size: cover;
-o-background-size: cover;
}
.owl-carousel .item {
display: block;
width: 100%;
height: 600px;
background-size: cover;
-o-background-size: cover;
}
.ad1{
display: block;
height: 600px;
background: url('../img/img1.jpg') no-repeat fixed;
}
.ad2{
display: block;
width: 100%;
height: 550x;
background: url('../img/img2.png') no-repeat ;
background-size: cover;
}
我已经给出100%的宽度,但仍然无法弄明白。我该如何删除它?!