为单个图像创建多个蒙版

Question

我正在尝试创建以下场景，并且我愿意尽可能地使用jquery、css和html的任何组合(但是，我现在不想使用HTML5，但如果它是唯一的解决方案，我愿意考虑它)。

我想有一个大的图像只可见的地方面具躺在它。我尝试了多种技术，但都不起作用。如有任何建议，我们将不胜感激！

​

​

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网格。将此图像/网格放在背景图像上。这将使您在将窗口移动到背景图像时具有很大的灵活性。