为单个图像创建多个蒙版

Question

我正在尝试创建以下场景，并且我愿意使用jquery，css和html的任何组合（我现在想要远离HTML 5，但我愿意看看它是否是唯一的解决方案）。

我想要一个大图像只能看到面具所在的位置。我尝试了多种技术，但都没有。我们欢迎所有的建议！

Answer 1

一种简单的方法是将图像设置为“窗口”上的background-image，它们绝对位于#maskContainer内。设置top和left，background-position设置为匹配。

见： http://jsfiddle.net/thirtydot/XjCCK/
（在WebKit浏览器中查看以便background-position动画有效;它纯粹用于演示）

<强> HTML：

<div id="maskContainer">
    <div class="window static"></div>
    <div class="window moving"></div>
</div>

<强> CSS：

#maskContainer {
    background: #000;
    width: 603px;
    height: 482px;
    position: relative;
    overflow: hidden;
}
.window {
    background: url(http://i.imgur.com/j9a2T.jpg) no-repeat;
    position: absolute;
}
.static {
    width: 80px;
    height: 80px;
    left: 20px;
    top: 30px;
    background-position: -20px -30px;
}

<强> JavaScript的：

var maskContainerWidth = $('#maskContainer').width(),
    maskContainerHeight = $('#maskContainer').height();

setInterval(function() {
    $('.moving').each(function() {
        var width = Math.floor(Math.random()*maskContainerWidth),
            height = Math.floor(Math.random()*maskContainerHeight),
            left = Math.floor(Math.random()*(maskContainerWidth-width)),
            top = Math.floor(Math.random()*(maskContainerHeight-height));

        $(this).animate({
            width: width,
            height: height,
            left: left,
            top: top,
            backgroundPositionX: -left,
            backgroundPositionY: -top
        }, 1000);
    });
}, 1000);

Answer 2

为什么不把你的“掩蔽div”周围的一切都当作面具（因为它就是它的真实含义）。使用带有透明孔的图像（屏蔽div所在的图像）或带有透明div的不透明div网格作为“屏蔽div”。将此图像/网格放在背景图像上。这样可以让您在移动时获得很大的灵活性窗户到背景图片。