CSS掩码图像不适用于滤镜：视频上的模糊（）。

Question

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

当存在所有这三个条件（视频，模糊和蒙版图像）时，会发生的事情是，覆盖（蒙版）图像将开始模糊到包含div的边界处的透明度，而不是它自己的边界。这意味着无论我制作多大的图像蒙版，或者我移动它，它都不会触摸并完全遮挡视频的边缘。

<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;
}

你可以在这里看到一个codepen：https://codepen.io/mcheah/pen/mGEbPW

有没有人知道如何解决这个问题？我不知道的一些CSS属性？还是另一种潜在的解决方法非常感谢！

Answer 1

如果有人需要一个解决方法，我只需在原始图像后面添加一个额外的图像，这个图像没有模糊。

即：

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

这覆盖了边缘，你无法确定边缘不是那么模糊。