模糊视频背景

Question

我必须添加平滑过渡到视频背景底部的模糊效果。我的意思是我不需要像这样的急剧过渡 <https://codepen.io/shabspb/pen/eYVNzem>，但我需要平稳过渡。

我看了很多关于堆栈溢出的资料，但找不到合适的答案。

Answer 1

尝试给模糊元素一个 mask-image 例如：

mask-image: linear-gradient(transparent, white 50%, white);

video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

}
.video-wrapper {
  border: 2px solid #000;
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); 
}

.blur.soft {
  mask-image: linear-gradient(transparent, white 50%, white);
  -webkit-mask-image: linear-gradient(transparent, white 50%, white);
}

<div class="video-wrapper">
  <video playsinline autoplay muted loop poster="cake.jpg">
    <source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
  <div class='blur'></div>
</div>

<div class="video-wrapper">
  <video playsinline autoplay muted loop poster="cake.jpg">
    <source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
  <div class='blur soft'></div>
</div>

模糊视频背景

Blur video background

css

background

blur

background-image