我在将 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 中对我来说效果很好。
*(好吧，在显示中“工作正常”，您需要进行一些调整以解决图像和视频之间的纵横比差异)
编辑:我认为您正在寻找类似 this 的内容.
关于html - 在视频 html/css 上应用 png 蒙版，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42057434/