Question

我必须覆盖两个图像以获得页面滚动的淡入淡出效果，这不是问题，它运作良好。问题是如果我没有为.square-banner类设置高度，则横幅与下面的横幅重叠（第二张图片）。因为网站是响应式的，我需要消除.square-banner类的高度，我没有找到解决方案。

<div id="banner-1-1" class="square-banner">
    <img class="img-bottom" id="img-bottom-1" src="images/prodigio-wording.jpg">
    <img class="img-top" id="img-top-1" src="images/prodigio.jpg">
</div>

.square-banner {
  position:relative;
  float:left;
  width:100%;
  height: 430px;
  cursor: pointer;
}

.img-bottom, .img-top {
width: 100%;
height: auto;
display:block;
float:left; 
}

.square-banner img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

由于图片position:absolute（要覆盖它们），.square-banner不占用高度空间。这是我必须解决的真正问题。

Answer 1

以下代码段显示了如何通过简单地使一个绝对覆盖两个相同大小的图像。另一个允许你自动装箱，不需要浮动。现在，您可以移动#container并以您想要的任何方式重塑它。

var container = document.getElementById('container');
container.addEventListener('click', function(e){
  container.className = container.className === 'other' ? '' : 'other';
});

#container {
  position: relative;
}
#container img {
  opacity: 1;
  -webkit-transition: opacity 500ms;
  transition: opacity 500ms;
}
#container img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
}
#container.other img {
  opacity: 0;
}
#container.other img:first-child {
  opacity: 1;
}

<div id="container">
  <img src="http://placehold.it/350x250" />
  <img src="http://placehold.it/350x250/dd0300" />
</div>

点击代码段将视觉图层从红色切换为灰色。

图像叠加和响应式设计

1 个答案: