0x00 闲言少绪
mix-blend-mode的screen与multiply在使用得当的情况下，可以实现任意形状的蒙板效果。
screen: multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color.
multiply: the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.
简单来说：screen可以把黑色变成透明，白色不变。 multiply可以把白色变成透明，黑色不变。原理很简单，但应用场景相对难找，我先列几个抛砖引玉。
0x01 文字蒙板
<div class="container">
<div class="backdrop"></div>
<div class="content-container">
<h1>...</h1>
</div>
</div>
HTML 结构如上，backdrop 垫在底下，负责展示渐变。h1颜色设为#FFF，content-container上设置 mix-blend-mode: multiply即可。
文字已经镂空，展示视频也不在话下。或者更炫一点？
上述例子用SVG的蒙板同样可以做到，尚在思考孰优孰劣，欢迎一同交流。