我正在研究轮播示例代码。但是像图像一样,盒子中还留有一个空格。
如何在全屏显示的情况下在无空格的情况下填充框?
我认为框填充...但不能在CSS中插入填充
这是轮播标记:
<div class="col-lg-6 col-sm-6 portfolio-item">
<div class="card h-100">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active">
<div class="carousel-caption d-none d-md-block">
<img src="image/image-1.jpg" style="width: 100%; height: 100%;">
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item">
<div class="carousel-caption d-none d-md-block">
<img src="image/image-2.jpg" style="width: 100%">
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item">
<div class="carousel-caption d-none d-md-block">
<img src="image/image-3.jpg" style="width: 100%; height: 100%;">
</div>
</div>
</div>
</div>
</div>
</div>
我上传CSS代码
1.css
`body {
background-image: url("../image/bgimage.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.carousel-item {
height: 44vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
++ other.css同一项目
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner::after {
display: block;
clear: both;
content: "";
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}