Question

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

当同时存在这三个条件（视频，模糊和蒙版图像）时，会发生什么情况，即重叠（蒙版）图像将在CONTAINING 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;
}

您可以在此处看到一个代码笔：https://codepen.io/mcheah/pen/mGEbPW

有人知道解决这个问题的方法吗？我不知道的一些CSS属性？还是其他可能的解决方法？非常感谢！

Answer 1

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

即：

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

这覆盖了边缘，您无法真正分辨出边缘没有那么模糊。

CSS遮罩图像不适用于视频上的filter：blur（）。

1 个答案: