我有一张图片。我在这个图像的顶部有第二个图形元素，我想用它来隐藏它下面的图像部分，而顶部元素本身没有显示。
的内容
CanvasRenderingContext2D.globalCompositeOperation = "destination-out"
这个顶部元素会改变透明度和实时形状，因此不能将所有内容预渲染到单独的画布上。
我在考虑“倍增”，但它并没有达到我的预期。我想如果我将顶层的alpha设置为“0”，那么它将与下面的层相乘，也使其透明。 （我很伤心它不起作用）
是否有人使用现有的CSS混合模式（或任何其他方法）“破解”这个？
答案 0 :(得分：0)
作为替代方案，请考虑mask-image（但请注意，目前IE / Edge上不支持此功能）：
img {
-webkit-mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png);
mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png);
}<img src="http://www.dizzydi.com/uploads/6/5/6/5/65656887/6168555.jpg" />