CSS mask-image 不适用于过滤器 :blur() over a video.

Question

这是一个非常具体的问题，但我正在尝试屏蔽模糊的图像并将其直接放置在视频上，以便渐变淡入淡出视频的一半。

当所有这 3 个条件(视频、模糊和蒙版图像)都存在时，覆盖(蒙版)图像将在 CONTAINING div 的边界开始模糊成透明，而不是它自己的边界。这意味着无论我制作多大的图像 mask 或如何移动它，它都不会触及并完全遮住视频的边缘。

<div id="container">
    <div id="background-image-mask></div>
    <video><source src=""></video>
</div>

#background-image-mask {
    height:105%;
    width: 105%;
    background-image: url('...');
    -webkit-image-mask: gradient(...);
    filter:blur(5px);
}

#container {
     overflow:hidden;
}

你可以在这里看到代码笔:https://codepen.io/mcheah/pen/mGEbPW

有谁知道解决这个问题的方法吗？一些我不知道的 CSS 属性？或者另一个潜在的解决方法？ 非常感谢!

Answer 1

如果有人需要解决方法，我只是在原始图像后面添加了一个附加图像，该图像没有被模糊掉。

即:

<img src="123.jpg" class="blur-me">
<img src="123.jpg" class="normal">

这会覆盖边缘，您无法真正判断出边缘没有那么模糊。