gpt4 book ai didi

html - "destination-out"- 类似使用 CSS 的混合行为?

转载 作者:行者123 更新时间:2023-11-28 03:23:25 24 4
gpt4 key购买 nike

我有一张图片。我在这张图片的顶部有第二个图形元素,我想使用它的 alpha 来“隐藏”它下面的部分图片,同时不显示顶部元素本身。

类似的东西

CanvasRenderingContext2D.globalCompositeOperation = "destination-out"

这个顶部元素将实时改变透明度和形状,因此将所有内容预渲染到单独的 Canvas 上将不是一种选择。

我在考虑“乘法”,但它没有达到我的预期。我想如果我把顶层的 alpha 设置为“0”,它会与下面的层相乘,也使它透明。 (我很伤心它没用)

有没有办法使用现有的 CSS 混合模式(或任何其他方法)“破解”它?

最佳答案

作为替代方案,请考虑 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" />

关于html - "destination-out"- 类似使用 CSS 的混合行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45111429/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com