为单个图像创建多个蒙版

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

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

Answer 1

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

请参阅： http ： //jsfiddle.net/thirtydot/XjCCK/
（在WebKit浏览器中查看，以便background-position动画工作;它纯粹用于演示）

HTML：

CSS：

 #maskContainer { background: #000; width: 603px; height: 482px; position: relative; overflow: hidden; } .window { background: url(http://sofzh.miximages.com/jquery/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”。将此图像/网格放在背景图像上。这样可以让您在移动时获得很大的灵活性窗口到背景图像。