css 混合混合模式和蒙版

Question

使用 mix-blend-mode 和 webkit-mask-composites 时能否将图像用作蒙版。例如，我可以使用白色圆圈作为另一个图像的遮罩，以仅显示两个元素中包含的区域。不是任何一个元素之外的东西。查看图像，原始图像为蓝色正方形，蒙版为圆形。我只想显示应用蒙版后留下的一小部分图像。请注意，这是一个简单的例子，我的实际面具要复杂得多，不能用基本形状模仿。mask

Answer 1

也许你应该使用 css 属性

clip-path 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% 即因为 div 具有圆角边框的实际上仍然是矩形，只是带有隐藏的边框半径。

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

css 混合混合模式和蒙版

css mix-blend-mode and masks

css

webkit