尝试使图像响应时，图像以宽度消失：100%

Question

我正在使用位置：绝对；和 z-index。

我想要一个淡入新图像的大背景图像。我将在其顶部创建一个表单，然后它们都必须能够向上滚动。 （我现在只是使用一些文本而不是表单）。

我不希望固定背景图像 - 我希望它与上面的任何内容一起向上滚动。这就是为什么我没有使用任何 CSS 背景代码的原因，因为我只能找到使背景固定的东西。

我所拥有的问题是我无法使图像具有响应性。我一放宽度：100%；在图像消失的任何地方编码。

$(function() {
  $('.fadein img:gt(0)').hide();

  setInterval(function() {
    $('.fadein :first-child').fadeOut()
      .next('img')
      .fadeIn()
      .end()
      .appendTo('.fadein');
  }, 4000);
});

.fadein {
  position: absolute;
}

.fadein img {
  position: absolute;
  left: 0;
  top: 0;
}

#bg {
  z-index: 1;
}

#fg {
  z-index: 9;
  position: relative;
}

.img-responsive {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="fadein">
  <img class="img-responsive" src="images/1.jpg" />
  <img class="img-responsive" src="images/2.jpg" />
  <img class="img-responsive" src="images/4.jpg" />
  <img class="img-responsive" src="images/6.jpg" />
</div>
<div id="fg" class="container">
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>

</div>

Answer 1

为了将绝对图像保留在#bg div 中，您应该将其设为相对。

.fadein {position: relative;} 或 #bg{position: relative;}