Javascript 如果有办法做到背景尺寸：封面和图片之间仍然可以滚动

我喜欢

背景尺寸：封面

居中，因为这意味着您的图像完全填充了容器元素。它只是让图像的一部分溢出到侧面，这取决于它在容器中的放置方式

我现在想做的是能够在

背景大小：cover

约束内滚动图像。也就是说，如果图像在顶部和底部溢出，我可以上下滚动我的触控板，它可以在图像上平移，这样你就可以看到覆盖的其余部分（类似于谷歌地图）。通过这种方式，您可以获得两个好处：

• 背景尺寸：盖子的主要优点（居中）是将容器装满

• 然而，如果我在上面滚动，我可以看到整个图像

---

想知道这是否可能，以及它是如何实现的，无论是使用CSS还是纯JavaScript。

如果没有一些繁重的JavaScript或库，我认为你无法实现这一点

使用html和css，这是我能做的最好的事情：

。封面{
宽度：180px；
高度：180像素；
显示：内联块；
溢出：自动；
溢出：-moz滚动条无；
-ms溢出样式：无；
}
.cover:：-webkit滚动条{
宽度：0！重要；
}
在…之后{
内容：''；
显示：块；
宽度：240px；
高度：360px；
背景图片：url(https://picsum.photos/240/360);
}

← 滚动此

我认为可以收听平移事件并调整背景位置。虽然我不认为这比重叠两个元素更容易：/