html - 变换/缩放不适本地缩放固定的背景附件

Question

我的应用程序中有两张图像相互叠加，分别表示为 foreground 和 background。对于这两个，我都使用 background-attachment: fixed 来确保图像始终彼此完全相同。这让我可以在前景上添加一个编辑后的版本，但仍然保持两个图像一致，因此它们看起来就像一个。

您可以在下面看到这方面的示例；

html,
body {
  height: 100%;
  width: 100%;
}

.background_container,
.foreground_container {
  height: 100%;
  width: 100%;
  position: relative
}

.background,
.foreground {
  background-image: url("https://i.redd.it/uojoraeqr4c31.png");
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
}

.foreground {
  max-height: 50%;
  margin: 5rem 0;
}

<div class="background_container">
  <div class="background"></div>
</div>


<div class="foreground_container">
  <div class="foreground"></div>
</div>

我遇到的问题是我需要在动画中放大这些图像。为此，我在关键帧上使用了 transform: scale (1.5)，但缩放得越多，两幅图像就越不同步。由于 background-attachment: fixed，我希望 foreground 的缩放比例与 background 完全相同，因为它们在同一平面上，但我'm 猜测所需的高度和边距属性会导致一些问题。

html,
body {
  height: 100%;
  width: 100%;
}

.background_container,
.foreground_container {
  height: 100%;
  width: 100%;
  position: relative
}

.background,
.foreground {
  background-image: url("https://i.redd.it/uojoraeqr4c31.png");
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  transform: scale(1.5);
}

.foreground {
  max-height: 50%;
  margin: 5rem 0;
}

<div class="background_container">
  <div class="background"></div>
</div>


<div class="foreground_container">
  <div class="foreground"></div>
</div>

有什么解决办法吗？我希望示例 2 看起来像示例 1，只是放大了一些。

Answer 1

https://jsbin.com/nesekuxuyu/1/edit?html,css,output

查看我的 jsbin。

删除特定于前景的样式并将 overflow: hidden; 添加到父容器。它可以正确缩放，但它超出了它的父容器的边界，通过 overflow hidden 可以防止它扭曲你可以看到的位。

编辑 在与 James 的外部讨论中，我看到了实际问题并正在研究适当的解决方案。比例覆盖背景附件中固有的固定行为