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;}

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

1 个答案: