具有 100% 宽度的 CSS 背景图像和动画滚动直到图像完成

Posted 2023-05-08

【中文标题】具有 100% 宽度的 CSS 背景图像和动画滚动直到图像完成

【英文标题】：CSS background image with 100% width and animate scroll until the image finishes

【发布时间】：2012-04-04 14:56:34

【问题描述】：

所以我有一个以大图像作为背景的网站。现在，我需要将其缩放到视口宽度的 100%，而不是将图像淡化为单一颜色或图案。

这并不能解决您只能看到图像的一部分（取决于浏览器大小）并且我需要让整个图像可见的问题。仅仅向下滚动是不够的，因为这样图像就会结束，我为背景选择的任何颜色都会出现（这很糟糕）。

所以我在想如果我能拥有的话会怎样

背景图像缩放为视口宽度的 100%，且具有图像宽度的最小尺寸

和

在滚动

直到

时也垂直向下动画 您到达图像高度的末端，然后它将停止，直到您向上滚动并恢复到图像的顶部， 具有视差效果。

分别拥有这些是easyenough，但我无法找到它们的组合并进行了修改以限制垂直滚动。如果有人能指出我正确的方向，我将非常感激。 :D

【问题讨论】：

我可以想象这种实现对用户来说是一种令人困惑的体验（背景滚动，然后停止，而内容继续滚动）。我想说simple option 就足够了，但这只是我的 2c。

我明白你的意思，内容本身不会放在背景的顶部，它会放在它自己的容器中，这是焦点......所以希望它不会对混淆用户产生任何影响。不过感谢您的链接！它也很近:)

【参考方案1】：

我已经为您在 jsFiddle 中描述的效果创建了一个工作演示：http://jsfiddle.net/qqW3G/ （注意：我为图像设置了 200% 的高度，以确保它足以跨越窗口高度以用于演示目的。您需要删除它以避免扭曲图像。）

编辑：您可能会考虑的另一个选项是视差滚动效果，其中正文内容的滚动速度比背景图像快，从而产生深度错觉。这是一个例子：http://jsfiddle.net/qPF2G/

【讨论】：

完美的家伙！非常感谢：D

它最初对我不起作用，但我发现这是因为我有 html height: 100%; ，只需将其删除即可！

如果 #bg_img 容器设置为 100% 高度，则图像在浏览器末端上方滚动。呸！

你能告诉我你的代码或链接吗？这将使我更好地了解您要完成的工作。