Question

所以我有一个比普通浏览器更高，更宽的背景图像。我希望能够将它按比例滚动到屏幕大小。由于它比正常情况长，我还希望当用户向下滚动页面直到用户到达底部时逐渐向下滚动。

简单地说，我想让我们假设侧面高度是1000像素，我的图像是1500，我想顶部开始一个页面并调整大小使其适合用户的屏幕，但是底部500我想要以一半的速度滚动当用户向下滚动时，它会慢慢滚动直到它到达底部。

我稍后会找到一个更简单的网站，这个概念很难用到文字和谷歌。如果有人理解，请帮助！

我需要使用css或其他东西

Answer 1

发布前应该做的2件事。

显示一些代码/尝试次数
检查您的来源。

就我在您提供的网站上看到的情况而言，他们使用简单的一张图像400px x 400px而另一张图像是53px x 54px，并且它重复两种方式（高度和宽度）。

这是背景图片：

http://inner.geek.nz/javascript/parallax/clouds.png

在PNG图像的背面是如下图像：

http://inner.geek.nz/javascript/parallax/bg-green.gif

这是一张GIF图片。

他们在CSS上使用以下内容，你应该继续使用它！

#ground {
background-image: url(bg-green.gif);
background-repeat: repeat;
background-attachment: fixed;
}

#clouds {
background-image: url(clouds.png);
background-repeat: repeat;
background-attachment: fixed;
padding: 5em 0;
}

这就是你要找的东西吗？

如何使用CSS流畅地滚动背景图像

1 个答案: