Css 一幅非背景图像的视差式滚动

这可能很难在没有视觉效果的情况下解释，但这里是这样的：想象一个“正常”的网页——没什么新奇的。现在想象一个主图像位于标题下方。将此图像成像仅显示其容器中高度的一半。现在想象一下向下滚动页面——当你这样做时，主图像以视差方式滚动，在它的容器中移动，露出它的另一半

---

我找不到这样的例子，因为我找到的所有东西都使用背景图像或其他图像以及在图像上方移动的元素。我只想让一个元素（主图像）看起来有一些透视效果。有人能给我举个例子吗？

你可以使用背景图像和它上面的另一个div来显示内容。

---

您可以使用引导视差效果，如查找示例我不明白为什么不需要背景图像，但在所有情况下，您都可以使用parallax.js，它使用属性

data image src

来指定图像

在本演示中看一看：

HTML:

如图所示：

（我知道这是一个老话题，但我想解释一下OP想要做什么的一种可能性）

我目前正在寻找完全相同的东西，因为我想使用

标记调用带有

srcset

和媒体查询的图像，从而在不同大小的设备上提供不同的图像。

---

但这看起来不太可能。

我理解您想要实现的目标，我认为背景图像正是您应该使用的。在css中选择普通图像而不是背景图像属性的原因是什么？无论原因是什么，您都可以尝试将该图像放入overflow:hidden容器中，并相应地操纵图像的上/下（甚至可能是填充？）属性，就像在标准视差效果中一样。我也找不到这样的例子：）在2020年，反对CSS中的

背景图像

的论点至少包含

srcset

，

大小

，以及

加载=“lazy”

。

<div class="demo" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

$('.demo').parallax({imageSrc: '/path/to/image.jpg'});