调整CSS中Bootstrap轮播图位置时底部出现黑条问题求助

我刚接触HTML/CSS、JS一周，目前Bootstrap轮播组件功能正常，但尝试把图片上移时，底部出现黑条，像是被自动裁剪。只要把CSS中#img1的bottom属性改成50px就会出现这个情况，我确认图片本身是完整的，想知道原因。

相关代码 #

CSS代码： #

#img1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0.5;
}

HTML代码： #

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="overlay-image" id="img1" style="background-image:url(./images/madeira3.JPEG);"></div>
      <div class="container">

调整前后对比 #

• 调整前：
• 调整后：

内容的提问来源于stack exchange，提问作者Boriscodes