css mix-blend-modeとmask

Question

mix-blend-modeとwebkit-mask-compositesを使用しているときに画像をマスクとして使用できますか？たとえば、別のイメージよりもマスクとして白い円を使用して、両方の要素に含まれる領域のみを表示できますか？いずれかの要素の外側にあるものではありません。元の画像は青い四角で、マスクは円です。私は、マスクが適用された後に残された画像の少しだけを表示したいと思います。これは簡単な例ですが、私の実際のマスクはもっと複雑で基本的な形で模倣することはできません。あなたはそれをマスクしたい場合はmask

Answer 1

おそらくあなたは https://css-tricks.com/almanac/properties/c/clip/

クリップパス

CSSプロパティを使用する必要があります。

Answer 2

あなたはjQueryのを望むなら、私はあなたのためのソリューションだ：それはあなたがそれをdiv要素が交差するだけで、別のdiv、ではないことがわかりますアニメーションだ

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>

を。それはborder-radius:50%で動作しません。つまり、丸められた枠線を持つdivは実際にはまだ矩形であり、隠れた境界線の半径だけであるからです。

アニメーションではないバージョンがここにあります：http://jsfiddle.net/GApu5/32/