他们的方法是让div只在另一个div中可见吗？

Question

问题非常自我解释。我想在暗室效果的画作上创造一种手电筒。我唯一的想法就是创建一个包含整个屏幕的div，除了另一个div所在的洞，但感觉不必要。下面是我想要描述的一个例子。

除非您在灰色div中移动，否则用户将看不到划掉区域。我只是想能够操纵更大的黑色div。

Answer 1

你需要2个div。一个包含黑暗图像，一个包含减轻图像。暗图像div可以是100％宽度和高度，BG应缩放以适合。

光图像div可以是任何尺寸。它的背景应缩放到与暗图像相同的比例（非常重要）。然后onmousemove您可以将光BG设置为div的x，y位置的相反位置。如果div为100,50，则bg需要为-100，-50。

http://jsfiddle.net/gunderson/rG8zF/

Answer 2

为什么不使用溢出：隐藏在“手电筒”div上并将内部div相对定位在你想要的位置？ “房间”div可以只是一个跨越屏幕的黑色背景。

查看 Example Fiddle - 或者，这是要点： HTML：

<div id="room">
    <div id="flashlight">
        <div id="innerDiv">
            <img src="http://i.imgur.com/hK0Bje8.jpg" />
        </div>
    </div>
</div>

CSS：

#room {
    background-color:black;
}
#flashlight {
    position:relative;
    overflow:hidden;
    width:100px;
    margin:0 auto;
}
#innerDiv {
    position:relative;
    left:-220px;
}

---

或者，您可以通过在“房间”前面放置两个div块来实现类似的效果（在某种意义上充当您的“外围边界”），如 {{3}所示} 即可。

---

让这种“动态”取决于你采取的方法。它要么涉及调整两个“阻碍”div块（例如2）的大小，要么改变“内部”div（例如1）的相对位置。话虽这么说，你也可以使用Fiddle。