css mix-blend-mode et masques

Question

Une image peut-elle être utilisée comme masque lors de l'utilisation du mix-blend-mode et des webkit-mask-composites. Par exemple, puis-je utiliser un cercle blanc comme masque sur une autre image pour afficher uniquement la zone contenue dans les deux éléments. Pas ce qui est en dehors de l'un ou l'autre des éléments. Voir l'image l'image originale étant le carré bleu et le masque étant le cercle. Je veux seulement montrer le peu de l'image qui reste après l'application du masque. S'il vous plaît noter que ceci est un exemple simple mon masque réel est beaucoup plus complexe et ne peut pas être imité par une forme de base. mask

Answer 1

Probablement vous devez utiliser la propriété css

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

si vous voulez masquer juste.

Answer 2

Si vous voulez que je jQuery obtenu une solution pour vous:

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>

C'est un animés de sorte que vous pouvez voir que ce n'est pas juste un autre div, où les divs se croisent. Cela ne fonctionne pas avec border-radius:50%, c'est-à-dire parce que les divs avec des bords arrondis sont en réalité toujours des rectangles, juste avec un rayon de bordure caché.

Vous pouvez trouver une version non animée ici: http://jsfiddle.net/GApu5/32/