CSS:使页面随着图像的长度滚动

Question

由于我对 CSS 非常非常陌生，我不确定这是否可行(如果不可能，我深表歉意)，但我想用背景图片创建某种效果。

我已经知道图像背景附件的两种方法 - 固定的，无论滚动如何，图像都保留在屏幕上的位置，以及自由的，图像正常滚动进出视线，附加到页面.我正在寻找两者之间的一种折衷方案，其中页面向下滚动，图像也会滚动，但滚动量与页面成比例。

本质上，我希望滚动使用百分比，而不是绝对值。在“滚动”中，将页面向下滚动 50 像素将使图像向上滚动 50 像素。我希望页面向下滚动 50% 将向下滚动到图像的 50%，而不管已经遍历了多少实际像素。在页面的顶部，我们可以看到图像的顶部。在页面底部，我们可以看到底部。

有没有办法用 CSS 做到这一点，还是我必须求助于其他东西？

Answer 1

您正在寻找一种叫做“视差”滚动的东西。在使用 transform-style: preserve-3d; 时，这可以通过纯 CSS 实现； (看看这个 article )，但要在所有浏览器上运行，您可能需要使用 javascript 解决方案。