所以我有这个以大图像为背景的网站。现在，我需要将图像缩放到视口(viewport)宽度的 100%，而不是将图像淡化为单一颜色或图案。
这并不能解决您只能看到图像的一部分(取决于浏览器大小)而我需要让整个图像可见的问题。仅向下滚动是不够的，因为那样图像就会结束，并且会出现我为背景选择的任何颜色(这很糟糕)。
所以我在想如果我可以拥有会怎样
- 背景图像缩放到视口(viewport)宽度的 100%，最小尺寸为图像宽度和
- 还在滚动时垂直向下设置动画 until
- 您到达图像高度的末端，然后它会停止，直到您向上滚动并恢复到图像的顶部，
- 具有视差效果。
将其中的每一个分开是 easy enough但我一直无法找到它们的组合以及修改以限制垂直滚动。如果有人能指出我正确的方向，我将非常感激。 :D
最佳答案
我已经为您在 jsFiddle 中描述的效果创建了一个工作演示:http://jsfiddle.net/qqW3G/ (注意:我为图像指定了 200% 的高度，以确保它足以跨越窗口高度以用于演示目的。您需要删除它以避免图像倾斜。)
编辑:您可能会考虑的另一种选择是视差滚动效果，其中正文内容滚动速度比背景图像快，从而产生深度错觉。这是一个例子:http://jsfiddle.net/qPF2G/
关于jquery - 具有 100% 宽度和动画滚动直到图像完成的 CSS 背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9781762/