Question

我的背景图片是6830像素x 768像素。我也有在页面中心的内容。背景设置为使用

background-size: cover;
background-position: 0 50%;

当用户按步骤进行时，背景需要设置动画（在非常宽的背景中向左滚动到另一个场景）。每个场景的设计为1366px x 768px。因此，当窗口高度为768px时，每个步骤需要将背景移动1366px。当视口分辨率完全相同时，将背景设置为动画非常容易，但是如果它大或小，那么我需要计算移动背景的程度。这就是我一直在努力的方向。根据视口大小与背景大小相比计算滚动量所需的数学运算是什么？

Answer 1

如果由于某种奇怪或合法的原因，视口的高度大于background-size: cover;，

6830px会破坏一些事情，一个小的修正方法是将背景大小更改为auto 100% ;

您的问题的解决方案是使用Luke提到的百分比，但是在使用background-position这里的Docker natively support´s Windows

时，您必须小心使用百分比。

仍然存在关于视口宽高比不同的问题，在完美的世界中，它始终是1366:768。您必须通过在顶部或底部或两者的视口外部留空空格或空格来妥协。取决于视口的给定比率。

必须在高度上做出妥协，因为每个场景（我假设）固定长度为1366像素。

最后解决方案：
我们将从场景0开始，bg-pos的值将为0% 50%
bg-x-pos的后续值将遵循公式100% / (n-x)
其中n是场景总数，x是场景编号。

4个场景的例子

场景0：background-position: 0% 50%;
场景1：background-position: 33.333% 50%;
场景2：background-position: 66.666% 50%;
场景3：background-position: 100% 50%;

Answer 2

谢谢@Luke＆amp; @jkris为您的建议。然而，问题更复杂，但我提出了一个解决方案。对于遇到相同问题的任何人，此功能可以帮助您：

calcBgPosition (slideNum) {
  let slideW = 1366;
  let slideH = 768;
  let winH = window.innerHeight;
  let winW = window.innerWidth;

  // Because the height determines the background scale we must multiply the width by the height scale to ensure calculations are correct
  let adjustedSlideW = slideW * (winH / slideH); 

  // In order to center the background we must first calculate the offset
  // then subtract the current slide position
  return ((winW - adjustedSlideW) / 2) - (adjustedSlideW * slideNum);
}

此用例的背景是我们有多个场景（幻灯片）。为获得最佳效果，第一张和最后一张幻灯片（背景的第一部分和最后一部分）应为出血幻灯片，这意味着它们将显示部分背景，但不会与您的内容一起使用。

如何根据视口宽度/高度计算移动背景图像的量

2 个答案: