图像重叠 BG 图像 and/or DIV

Question

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

此外，在下面提供的示例中 -- 我注意到重叠图像放置在 span 标记内。知道为什么吗？如果您能大致描述一下您将如何处理这种设计——那就太棒了！

Answer 1

这是一个非常简洁的效果。这是您可以做的多种方法中的一种。诀窍是在带有背景的 div 上有一个固定的高度，在它里面，另一个包含图像的 div。

我尽量保持 height/widths 很小，以便您可以在嵌入的代码段上正确检查它们。我尽量保持样式最少以重新创建您所要求的内容。

让我知道这样的事情是否有效。

.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>

Answer 2

在您提到的示例中，图像不是 <img /> 标签，而是 <div /> 相互重叠。这两个 <div /> 都有背景图片。

有多种解决方案可以使 2 <div /> 重叠，您可以使用绝对定位、浮动、负边距，让父级 <div /> 的背景高度大于背景图片等

例如，使用负边距，如果我有 2 个 <div /> 彼此跟随，例如：

<div class="bg1"></div>
<div class="bg2"></div>

我可以简单地为第二个添加一个负的上边距，使其出现在第一个之上，给人一种重叠的错觉，比如：

.bg2 {
  margin-top: -40px;
}

您可以查看 this JSFiddle 上使用负边距的示例。

图像重叠 BG 图像 and/or DIV

Image overlapping BG image and/or DIVs

html

css

image

overlapping