CSS 混合混合模式和蒙版

Question

在使用混合-混合-模式和webkit-mask-composites时，图像是否可以用作蒙版。例如，我可以在另一个图像上使用白色圆圈作为蒙版，以仅显示两个元素中包含的区域。不是任何一个元素之外的东西。参见图像，原始图像是蓝色正方形，蒙版是圆形。我只想显示应用蒙版后留下的一点图像。请注意，这是一个简单的例子，我的实际面具要复杂得多，无法通过基本形状来模仿。

Answer 1

如果你想要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/

Answer 2

可能你应该使用 css 属性

剪辑路径 https://css-tricks.com/almanac/properties/c/clip/

如果你只想掩盖它。