使图像（位置：固定）仅在 DIV 内可见

Question

我想创建一个网站，灵感来自http://cirkateater.no/en/。
图像应保持在屏幕上的同一位置（位置：固定），但在下一个 div 内，第二个图像应为可见。

我的第一个解决方案是使用背景图片，这很有效。

使用背景图像，它看起来像这样的 JSFIDDLE： http://jsfiddle.net/Ryanous/r7mLm4wg/4/（我不拥有这些图片）
考虑以下代码：

<div class="background" style='background-image:url("http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg");'></div><div class="background" style='background-image:url("http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg");'></div>

但我也想稍后通过 JS 移动图像！ 你不能轻易地操纵背景图像的顶部偏移，所以我决定使用 img-tag 来代替。

现在，使用 img-tag，图像似乎独立于它们的 div，并且彼此重叠，因此 总是只有一个图像可见。

(id 喜欢包含我当前的代码，但 stackoverflow 不允许我这样做。四个空格不做任何事情，我无法格式化我的代码。)

所以我的问题是：


如何使图像仅在某个 div 内可见，但保持位置固定？

Answer 1

将样式 overflow:hidden; 放在 div 上会隐藏 div 之外的所有内容。