固定的背景图像在儿童上以负边距移动

Question

我有以下代码

.top {
  background-color: Red;
  height: 200px;
}

.middle {
  background-color: Yellow;
  height: 200px;
}

.inner-middle {
  background-color: Aqua;
  height: 200px;
  margin: -50px 25px 0 25px;
}

<div class="top">
</div>
<div class="middle">
  <div class="inner-middle">
  </div>
</div>

代码产生这种布局：

我想在中间div上放置一个固定的背景图像，为此，我在中间 div中添加了一个新类。

.fixed-bg {
    background-image:url(/assets/images/map.jpg);
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

然而，结果并非我的预期。这是一张图片：

如您所见，父母与孩子一起被拉起来。

我可以使用位置相对而不是负边距来修复此问题。我还可以看一下将图像移动到不同的水平。但是，当我正在研究一些已经定义的类时，我想尝试尽可能保持它的香草。

我可以在此代码中添加一个神奇的调整来阻止图像向上移动吗？

Answer 1

不是理想的解决方案，但一个选项可能是添加background-position: 50px center。顶部位置应该等于内中间div的上边距