css混合混合模式和蒙版

Question

使用混合混合模式和webkit蒙版复合时，图像可以用作蒙版。例如，我可以使用白色圆圈作为另一图像上的遮罩，以仅显示两个元素中包含的区域。不是在任何元素之外。看到图像的原始图像是蓝色的正方形，面具是圆圈。我只想显示应用遮罩后留下的图像的一点点。请注意，这是一个简单的例子，我的实际面具要复杂得多，不能用基本的形状来模仿。 mask

Answer 1

也许，如果你只想掩盖它，你应该使用CSS属性

夹路径 https://css-tricks.com/almanac/properties/c/clip/

。

Answer 2

如果你想的jQuery我对你的解决方案：

function addOverlapBox() { 
 
    var wrapper = $('#wrapper'), 
 
     div1 = $('#div1'), 
 
     div2 = $('#div2'), 
 
     overlay = $('<div id="overlay"></div>'); 
 
     wrapper.append(overlay); 
 
    
 
    
 
    setInterval(function() { 
 
     theta += 0.01; 
 
     div1 = $('#div1'), 
 
     div2 = $('#div2'), 
 
     overlay = $('#overlay'); 
 
     
 
    var l1=100 + 20*Math.cos(theta); 
 
    var t1=80 + 50*Math.sin(theta); 
 
    var w1=div1.width(); 
 
    var h1=div1.height(); 
 
    
 
    var l2=70 + 30*Math.cos(2*theta);//div2.offset().left-8; 
 
    var t2=90 + 32*Math.sin(theta);//div2.offset().top-8; 
 
    var w2=div2.width(); 
 
    var h2=div2.height();   
 
     
 
     div1.css({'top': t1, 'left': l1});  
 
     div2.css({'top': t2, 'left': l2});  
 
      
 
    var top = Math.max(t1,t2); 
 
    var left = (l2>l1 && l2<(l1+w1)) ? l2 : (l1>l2 && l1<(l2+w2)) ? l1 : 0; 
 
    var width = Math.max(Math.min(l1+w1,l2+w2) - Math.max(l1,l2),0); 
 
    var height = Math.max(Math.min(t1+h1,t2+h2) - Math.max(t1,t2),0); 
 
    overlay.css({'top': top, 'left': left, 'width': width, 'height': height}); 
 
    }, 10); 
 

 

 
} 
 

 
function rgb2hex(rgb) { 
 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
 
    function hex(x) { 
 
     return ("0" + parseInt(x).toString(16)).slice(-2); 
 
    } 
 
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
 
} 
 

 
theta = 0; 
 

 
addOverlapBox();

#wrapper {position:absolute; margin-top:0px; width:500px; height:300px;padding: 0px;} 
 

 
#div1 {background-color:rgba(100, 20, 180, 1); width:80px; height:80px;position:absolute; left:60px; top: 50px; z-index:2;border:0;} 
 
#div2 {background-color:rgba(249, 177, 67, 1); width:110px; height:70px; position:absolute; left:60px; top: 100px; z-index:1;border:0;} 
 
#overlay {background-color:rgba(0, 0, 0, 1); position:absolute;z-index:10;border:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="div1"></div> 
 
    <div id="div2"></div> 
 
</div>

这是一个动画，所以你可以看到，它不只是一个DIV，其中的div相交。这不适用于border-radius:50%即tho，因为具有圆形边框的div实际上仍然是矩形，只是具有隐藏的边框半径。

这里您可以找到一个非动画版本：http://jsfiddle.net/GApu5/32/