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)，但是缩放比例越大，两张图片的同步就越不同步。由于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%;
  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;添加到父容器。它可以正确缩放，但是它超出了其父容器的范围，并且通过隐藏溢出来防止它扭曲您可以看到的位。

编辑在与James的外部讨论中，我看到了实际的问题，并正在研究适当的解决方案。规模超越了背景附着固有的固定行为

变换/缩放无法正确缩放固定的背景附件

1 个答案: