为单个图像创建多个蒙版 [英] Creating multiple masks for a single image

问题描述

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

我想有一个大图像只能看到面具躺在它上面。我试过多种技术，没有一个工作。我们欢迎所有的建议！

>

解决方案

一个简单的方法是将图像设置为 background-image 窗口，它们绝对位于 #maskContainer 中。 顶部和左，并且 background-position

查看： http://jsfiddle.net/thirtydot/XjCCK/

（在WebKit浏览器中查看，因此 background-position 动画

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

CSS：

$ b b

  #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 = $ '）。高度（）; 
 
 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）; 
} $ b}，1000）; 
  

I am attempting to create the following scenario, and I'm willing to use any combination of jquery, css, and html possible (I'd like to stay away from HTML 5 right now however, but I'm willing to look at it if it is the only solution).

I would like to have a large image ONLY viewable where the masks lie on it. I've tried multiple techniques, none of which work. Any suggestions would be much appreciated!

解决方案

One simple method is to have the image set as a background-image on the "windows", which are absolutely positioned within #maskContainer. top and left are set, and background-position is set to match.

See: http://jsfiddle.net/thirtydot/XjCCK/
(view in a WebKit browser so the background-position animation works; it's purely for the demo)

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

这篇关于为单个图像创建多个蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！