围绕jQuery可拖动div的区域变暗？

Question

我正在寻找一种方法来使容器内的所有区域变暗，除了透明的子div。这个div是可拖动的，因此暗淡的区域必须随之移动。有谁知道使用jQuery / CSS实现这一目标的方法？这是我想要实现的效果的图片：

编辑：已解决

请参阅@Robby Cornelissen的回答

Answer 1

可以执行this fiddle之类的操作。它依赖于具有固定背景的绝对定位的视口元素。如果单击视口元素，您将看到它在背景保持固定时移动。

<强> HTML

<div class="back">
    <div class="overlay">
        <div class="front">
        </div>
    </div>
</div>

<强> CSS

.back, .front {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Swallow_flying_drinking.jpg/1024px-Swallow_flying_drinking.jpg");
    background-attachment: fixed;
    background-position: 0,0;
}

.back {
    width: 1024px;
    height: 623px;
}

.front {
    position: absolute;
    left: 200px;
    top: 50px;
    width: 300px;
    height: 150px;
    z-index: 100;
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}