Question

我想使用带有滚动背景图像的响应式div。

在示例中，我展示了它的大小。我希望整个滚动保持恒定-因此小div应该花费x秒，大div也应该花费x秒（而不是小div完成整个图像平移所花费的时间要比大div花费更少的时间）。

我尝试在background-position-x中使用百分比值，但它会停止动画。

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 100%;
  animation: slideLeft768px 5s linear infinite;
}

.div1 {
  width: 76.8px;
  height: 57.6px;
}

.div2 {
  width: 768px;
  height: 576px;
}

@keyframes slideLeft768px {
  0% {
    background-position-x: 768px;
  }
  100% {
    background-position-x: 0px;
  }
}

<div class="offset div1"></div>
<div class="offset div2"></div>

===================

这是基于Temani Afif的答案：

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 100%;
  animation: slideLeft 5s linear infinite;
  width: var(--p);
  --p: 40vw;
  height: 30vw;
}
.div1 {
    --p: 12vw;
    height: 9vw;
}

@keyframes slideLeft {
  0% {
    background-position-x: var(--p);
  }
  100% {
    background-position-x: 0px;
  }
}

<div class="offset div1"></div>
<div class="offset div2"></div>

我使它仅使用响应单元，因此在调整窗口大小时会进行调整。

Answer 1

您可以考虑使用CSS变量来使动画动态化：

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 100%;
  animation: slideLeft768px 5s linear infinite;
  width: var(--p);
}

.div1 {
  --p: 76.8px;
  height: 57.6px;
}

.div2 {
  --p:768px;
  height: 576px;
}

@keyframes slideLeft768px {
  0% {
    background-position: var(--p,0px) 0px;
  }
  100% {
    background-position: 0px 0px;
  }
}

<div class="offset div1"></div>
<div class="offset div2"></div>

由于您使用的是已知尺寸的同一张图片，因此您可以像下面这样优化代码：

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 100%;
  animation: slideLeft768px 5s linear infinite;
  width: calc(768px * var(--p,1));
  height: calc(576px * var(--p,1));
}

.div1 {
  --p: 0.1;
}

.div2 {
  --p:0.2;
}

@keyframes slideLeft768px {
  0% {
    background-position: calc(768px * var(--p,1)) 0px;
  }
  100% {
    background-position: 0px 0px;
  }
}

<div class="offset div1"></div>
<div class="offset div2"></div>
<div class="offset" style="--p:0.8"></div>

您还可以查看此答案（https://stackoverflow.com/a/51734530/8620333），以了解为什么百分比值不起作用以及如何使其起作用。

Answer 2

技巧是为背景位置使用百分比。由于将背景尺寸设置为100％不可能实现，因此我们需要将其设置为另一个值。

一个技巧是为此使用填充。创建与宽度相同尺寸的填充。使背景原点成为paddin框，然后剪切内容框，现在我们可以将尺寸设置为50％。在视觉上，什么都不会改变。（如果多余的填充是个问题，则可以设置负边距或剪切路径）。现在，背景位置可以按百分比移动：

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 50%;
  background-origin: border-box;
  background-clip: content-box;
  animation: slideLeft768px 5s linear infinite;
}

.div1 {
  width: 76.8px;
  padding-right: 76.8px;
  height: 57.6px;
}

.div2 {
  width: 768px;
  padding-right: 768px;
  height: 576px;
}

@keyframes slideLeft768px {
  0% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 0%;
  }
}

<div class="offset div1"></div>
<div class="offset div2"></div>

恒定速度的响应式背景滚动

2 个答案: