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/