CSS 中移动图像时出现黑条

Question

我大约一周前开始使用 HTML/CSS、JS，遇到了一个小问题。我使用引导程序轮播，它工作得很好，但是当我尝试将图像更多地移动到顶部时，我最终在底部得到黑条，就像有东西自动裁剪我的图像。

当我将“底部”调整为 50px 时，我得到了那些黑条，但我的目的是将图像向上移动。这是一张完整的图像，所以我 100% 确定下面有东西。有谁知道怎么回事吗？

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

<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">

Answer 1

您遇到的问题是因为您正在向上移动显示图像的元素。

您已将图像设置为背景图像，因此您可以使用背景属性来定位图像。

做这样的事情可能会有所帮助：

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

这将水平和垂直定位图像中心

#img1 {
    background-size:cover;
    background-position:center center;
}

这会将图像水平放置在中心并垂直放置在顶部

#img1 {
    background-size:cover;
    background-position:center top;
}

您还可以添加像素值，假设您希望始终修剪掉前 50 个像素，

#img1 {
    background-size:cover;
    background-position:center -50px;
}