图像叠加和响应式设计

Question

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

<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 不占据space 的高度。这才是我真正要解决的问题。

Answer 1

以下代码片段展示了如何通过简单地使 one 绝对化来叠加两个相同大小的图像。另一个将允许您的框自动具有高度，不需要浮动。现在您可以在 #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>

单击代码片段可将可视层从红色切换为灰色。

图像叠加和响应式设计

Image overlay and responsive design

css

overlay

responsive-design