我有一个使用Bootstrap 4编写的2张幻灯片,每张幻灯片都有一张图片作为其背景,但我无法使这些图片全宽。
通常情况下,我会在网页上使用
我的代码如下。我尝试将背景大小、附件和覆盖应用到以下类中:
通常情况下,我会在网页上使用
background-size: cover
、background-attachment: fixed;
和background-repeat: no-repeat
来实现类似的效果,但是我无法在轮播中实现这个效果。我的代码如下。我尝试将背景大小、附件和覆盖应用到以下类中:
.carousel
、.carousel-inner
、.carousel-item
以及轮播中的img
。<div id="officeCarousel" class="carousel slide" data-ride="carousel" style="width:100%;">
<ol class="carousel-indicators">
<li data-target="#officeCarousel" data-slide-to="0" class="active"></li>
<li data-target="#officeCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="office1.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="card card-inverse card-success mb-3 text-center">
<div class="card-block">
<h4 class="card-title">Office 1</h4>
<p class="card-text">Work from the heart of the newly renovated area.</p>
<a href="#" class="card-link">About this office</a>
<a href="#" class="card-link">Book this office</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="office2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<div class="card card-inverse card-success mb-3 text-center">
<div class="card-block">
<h4 class="card-title">Office 2</h4>
<p class="card-text">Work from this inner-city rural village.</p>
<a href="#" class="card-link">About this office</a>
<a href="#" class="card-link">Book this office</a>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#officeCarousel" role="button" data-slide="prev" >
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#officeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
非常感谢您的帮助!
编辑:下面是相关部分的CSS。这是默认的V4 Bootstrap CSS。
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden
}
.carousel-item {
position: relative;
display: none;
width: 100%
}