小编Fin*_*n C的帖子

我似乎在这里尝试了书中的所有技巧,但没有任何工作.

我有一个全屏,绝对定位的HTML5视频背景,我需要模糊.但是,我希望它有锋利的边缘.

到目前为止,我已经在网上尝试了大约20或30种不同的解决方案,似乎没有任何效果.

这是我尝试过的:

- 设置负边距

- 设置负顶部,左侧,右侧,底部边距

- 在隐藏溢出的容器中设置正边距

- 设置在隐藏溢出的容器中

- 方法在这里注意:定义边缘与CSS3滤镜模糊 - 定义边缘与CSS3滤镜模糊 - CSS模糊和保持锋利的边缘使用绝对div - 模糊绝对背景,同时保持坚实的边缘 - http://volkerotto.net/2014/07/03/CSS-背景图像模糊,而无需-blury-边缘/

这是迄今为止的代码:

HTML

<video id="videobcg" preload="auto" autoplay="true" loop="loop"     muted="muted" volume="0">
<source src="vid/myVid.mp4" type="video/mp4">
<source src="vid/myVid.webm" type="video/webm">
    Sorry, your browser does not support HTML5 video.
</video>

CSS

#videobcg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100% !important;
    max-height: 100% !important;
    z-index: -1000;
    overflow: hidden;
    object-fit: fill;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
}

也许我做错了什么,我不太确定.我正在做什么阻止它工作？ …