使用CSS的“目标出”类混合行为？

我有一个图像。我在这个图像的顶部有第二个图形元素，它的alpha我想用来“隐藏”它下面的图像的一部分，而顶部元素本身没有显示。使用CSS的“目标出”类混合行为？

东西沿着

CanvasRenderingContext2D.globalCompositeOperation = "destination-out"

此顶级元素的线条将改变透明度和形状的活，所以预渲染的一切到一个单独的画布不会是一个选项。

我在想“繁殖”，但它没有达到我预期的效果。我想如果我把顶层的alpha值设置为“0”，那么它会与下面的图层相乘，并且使它透明。（我很伤心它没有工作）

有没有办法使用现有的CSS混合模式（或任何其他方法）“破解”？

来源

2017-07-14 DavidsKanal

混合？像过滤器：在CSS 3模糊？ – Zydnar

像这样：https://en.wikipedia.org/wiki/Blend_modes – DavidsKanal

最简单的方法是使用透明覆盖。您可以在webgl中执行更复杂的操作，即使移动浏览器也支持它，但不是全部，但是如果质量很重要......考虑效果是否值得。 – Zydnar

作为替代方案，考虑mask-image（但请注意，目前有关于IE /边缘此不支持）：

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" />

来源

2017-07-14 21:41:16 Conan

使用CSS的“目标出”类混合行为？

回答

相关问题