在视频上应用 png 蒙版 html/css
Applying a png mask on a video html/css
我在将 PNG 蒙版应用于 MP4 文件时遇到了一些问题。
不确定我哪里出错了。
html 就像
<html>
<body>
<video id="wee" autoplay src="dosebotdesigns.com/smoke.mp4">
</body>
</html>
并且 css 读取，
#wee {
mask-image: url(dosebotdesigns.com/test4.png);
}
随时查看此 JSFiddle：
https://jsfiddle.net/tyd8wggr/
我的主要目标是让 png 遮盖烟雾视频。感谢您的宝贵时间！
这个标签是实验性的，在很多浏览器中都不起作用，请参阅 its compatibility matrix。也就是说，只需将 -webkit-mask-image: url(http://dosebotdesigns.com/test4.png); 添加到您现有的 css.
，它在 Chrome 55ish 中对我来说效果很好*
*（好吧，"works fine" 在其中 显示 ，您需要进行一些调整以解决图像和视频之间的纵横比差异）
编辑：我认为您正在寻找类似 this 的内容。
它应该是 -webkit-mask-image 才能在 chrome 上运行，但它现在只能在某些浏览器上运行。
我在将 PNG 蒙版应用于 MP4 文件时遇到了一些问题。 不确定我哪里出错了。
html 就像
<html>
<body>
<video id="wee" autoplay src="dosebotdesigns.com/smoke.mp4">
</body>
</html>
并且 css 读取，
#wee {
mask-image: url(dosebotdesigns.com/test4.png);
}
随时查看此 JSFiddle： https://jsfiddle.net/tyd8wggr/
我的主要目标是让 png 遮盖烟雾视频。感谢您的宝贵时间！
这个标签是实验性的，在很多浏览器中都不起作用，请参阅 its compatibility matrix。也就是说，只需将 -webkit-mask-image: url(http://dosebotdesigns.com/test4.png); 添加到您现有的 css.
*（好吧，"works fine" 在其中 显示 ，您需要进行一些调整以解决图像和视频之间的纵横比差异）
编辑：我认为您正在寻找类似 this 的内容。
它应该是 -webkit-mask-image 才能在 chrome 上运行，但它现在只能在某些浏览器上运行。