Html &引用；“目的地输出”-像使用CSS的混合行为？

我有一个形象。我在这个图像的顶部有第二个图形元素，我想用它的alpha来“隐藏”图像下面的部分，而顶部元素本身并没有显示出来

类似于

CanvasRenderingContext2D.globalCompositeOperation = "destination-out"

此顶部元素将更改透明度和实时形状，因此无法将所有内容预渲染到单独的画布上

我想用“乘法”，但它没有达到我预期的效果。我想如果我把顶层的alpha设置为“0”，那么它将与下面的层相乘，也使其透明。（我很伤心，它没用）

---

<强>是否存在使用现有CSS混合模式（或任何其他方法）“黑客”的方法？< <强> >/p> < p>作为备选方案，考虑<代码>掩码图像< /代码>（但是注意，目前在I/Edge上没有支持）：

img{
-webkit掩码图像：url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png);
掩码图像：url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png);
}

---

混合？像css3中的filter:blur？像这样：最简单的方法是使用透明覆盖。您可以在webgl中执行更复杂的操作，即使移动浏览器也支持它，但不是全部，但如果质量很重要。。。考虑一下效果是否值得付出努力。