javascript - jQuery 可拖动 div 周围的区域变暗？

Question

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

编辑:已解决

查看@Robby Cornelissen 的回答

Answer 1

可以做类似 this fiddle 的事情.它依赖于具有固定背景的绝对定位视口(viewport)元素。如果您单击视口(viewport)元素，您会看到它移动而背景保持固定。

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);
}