CSS маска-изображение не работает с фильтром: blur () поверх видео.

Question

Это очень специфическая проблема, но я пытаюсь замаскировать размытое изображение и поместить его прямо на видео, чтобы градиент затухал и скрывал половину видео.

То, что происходит, когда присутствуют все 3 из этих условий (видео, размытие и маска-изображение), заключается в том, что наложение (маскирование) изображения начнет размываться в прозрачность на границах элемента CONTAINING, а не на его собственных границах. Это означает, что независимо от того, насколько большой я делаю маску изображения или как бы я ее ни перемещал, она никогда не коснется и не полностью затеняет края видео.

<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">

Это охватывает края, и вы не можете сказать, что края не такие размытые.