html - 图像重叠 BG 图像和/或 DIV

Question

我想合并一个位于现有图像之上的图像(并且可能横跨两个不同的 div。一般来说，我只想看看您建议的通用 html 结构 - 以及我应该遵循的任何 CSS 规则我花了几个小时尝试复制我想要的结构 - 但在检查元素并尝试解构和重新构建之后，我无法生成任何接近我想要的结构。

此外，在下面提供的示例中 - 我注意到重叠图像被放置在 span 标记内。知道为什么吗？如果你能粗略地描述一下你将如何进行这种设计——那就太棒了!

Answer 1

这是一个非常简洁的效果。这是您可以采取的多种方法中的一种。 诀窍是在带有背景的 div 上设置固定高度，并在其内部设置另一个包含图像的 div。

我尝试将高度/宽度保持得非常小，以便您可以在嵌入的代码片段上正确检查它们。我尝试尽可能减少样式以重新创建您所要求的内容。

让我知道这样的方法是否有效。

.first-image{
  background: #eee;
  height: 250px;
}
.container{
  width: 95%;
  margin: 0 auto;
  max-width: 400px;
}
.container--padding{
  padding: 1rem 0;
}
.second-image{
  margin: 2rem auto;
}

<header>
  <div class="first-image">
    <div class="container container--padding">
      <h2>I'm the cool title headline.</h2>
      <button>Download</button>
    </div>
    <div class="second-image">
      <div class="container">
        <img src="http://placehold.it/400x190" alt="placeholder" />
      </div>
    </div>
  </div>
</header>