我的目标是能够使用 PNG alpha 蒙版沿网站上部分/行/容器的底部创建“锯齿状边缘”。
因为行可以是任意高度，所以我需要能够仅沿元素的一个边缘应用薄蒙版图像，并且仍然显示蒙版“开始”点上方的所有内容。
我可以通过分层两个蒙版在 Safari 中实现这一点：一个linear-gradient（黑色>黑色）覆盖容器的任何高度，加上一个 66px 高的 alpha PNG“条”用于容器的底部边缘，然后设置-webkit-mask-composite: destination-atop- 这有效地反转了蒙版，允许 PNG 上方的所有内容都显示出来，并且只掩盖底部“参差不齐”的边缘。
这是在 Safari 桌面浏览器中运行的代码：
-webkit-mask: url("mask.png") 0 0/100%, linear-gradient(black, black);
-webkit-mask-composite: destination-atop;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: bottom left;
您可以在此（测试/开发）站点的白色导航栏上的 Safari 桌面浏览器中看到此功能：https ://wesleyd14.sg-host.com
不幸的是，它似乎-webkit-mask-composite: destination-atop在 Chrome 中不受支持，并且mask-composite在 Firefox 中没有等效值。
有谁知道另一种可以完成同样事情的方法，即仅沿容器的一个边缘应用蒙版，同时仍允许蒙版之外的所有内容保持未蒙版？