具有定义边缘的模糊背景视频答案

【问题标题】：Blurred background video with defined edges具有定义边缘的模糊背景视频
【发布时间】：2015-03-31 05:07:28
【问题描述】：

这是我的背景视频截图。

我尝试为视频设置负边距并溢出：隐藏到包装器中，正如 here 所解释的那样，但它不起作用...可能是因为视频是 position: fixed？

代码如下：

#videowrapper {
    height: 100vh;
    background: black;
}

video {
    position: fixed; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: 0;
    filter: blur(20px);
}

如何在保持边缘清晰的同时模糊视频？

【问题讨论】：

标签： html css video blur

【解决方案1】：

您可以使用组合滤镜：blur() 和背景滤镜：blur() 来创建跨浏览器解决方案。

body {
  margin: 0;
}

.container {
  --blur: 20px;
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background: red;
}

.videobg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  object-fit: cover;
  display: block;
  overflow: hidden;
  @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    // firefox, ...
    filter: blur(var(--blur));
    object-fit: cover;
    top: calc(-2 * var(--blur));
    left: calc(-2 * var(--blur));
    height: calc(100% + 4 * var(--blur));
    width: calc(100% + 4 * var(--blur));
  }
}

.backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    // chrome, edge, safari, ...
    backdrop-filter: blur(var(--blur));
  }
}

<div class="container">
  <div class="backdrop"></div>
  <video class="videobg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="https://visionsbox.de/assets/cms/projects/3d-produktfilme/tevisio_DE.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
  </video>
</div>

见jsfiddle

【讨论】：