css Mix-Blend-Modus und Masken

Question

Kann ein Bild als Maske verwendet werden, wenn der Mix-Blend-Modus und die Webkit-Masken-Composite verwendet werden. Zum Beispiel kann ich einen weißen Kreis als Maske über einem anderen Bild verwenden, um nur den Bereich zu zeigen, der in beiden Elementen enthalten ist. Nicht was außerhalb der Elemente ist. Siehe Bild das Originalbild ist das blaue Quadrat und die Maske ist der Kreis. Ich möchte nur das kleine Teil des Bildes zeigen, das übrig ist, nachdem die Maske angewendet wurde. Bitte beachten Sie, dass dies ein einfaches Beispiel ist. Meine eigentliche Maske ist viel komplexer und kann nicht mit einer Grundform nachgeahmt werden. mask

Answer 1

Wahrscheinlich sollten Sie CSS-Eigenschaft

Klipppfad https://css-tricks.com/almanac/properties/c/clip/

wenn Sie nur maskieren wollen es verwenden.

Answer 2

Wenn Sie jQuery wollen habe ich eine Lösung für Sie:

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>

Es ist ein animierter so kann man sehen, dass es nicht nur ein weiteres div ist, wo die divs schneiden. Das funktioniert nicht mit border-radius:50%, d. H. Weil divs mit abgerundeten Rändern tatsächlich immer noch Rechtecke sind, nur mit einem versteckten Rand-Radius.

Sie können eine nicht animierte Version hier finden: http://jsfiddle.net/GApu5/32/