如何使用 CSS 模糊覆盖在图像顶部的视频边缘？答案

【问题标题】：How to use CSS to blur video edges overlayed on top of an image?如何使用 CSS 模糊覆盖在图像顶部的视频边缘？
【发布时间】：2020-07-21 15:58:47
【问题描述】：

我目前有一个视频叠加在图像上。我想模糊视频的边界，使其柔和地融入下面的底层图像。有没有办法让我用 HTML/CSS 做到这一点？

这是 JS 小提琴：https://jsfiddle.net/blahblahtest/d8at3q5h/

#container {
  margin-left: 200px;
  position: relative;
}

#background_image,
#overlaid_video {
  position: absolute;
  left: 0;
}

#overlaid_video {
  z-index: 10;
  margin-top: 65px;
  margin-left: 152px;
}

<div id="container">
  <div id="background_image">
    <img src="https://i.pinimg.com/originals/ee/a4/6b/eea46b9905896b7336f6ca60e238ff67.jpg" height="820px">
  </div>
  <div id="overlaid_video">
    <video id="video" width="256" autoplay muted>
      <source src="https://media.gettyimages.com/videos/reptile-video-id473277749" type="video/mp4" />
  </video>
  </div>
</div>

【问题讨论】：

标签： html css frontend web-frontend

【解决方案1】：

这是一种残酷的方式，但我猜总比没有好。我也很确定 yoo 可以使用 clip-path 做同样的事情，它可以大大减少 css 代码。

根据需要调整宽度、高度和位置

<body>
<div id="container">
  <div id="background_image">
    <img src="https://i.pinimg.com/originals/ee/a4/6b/eea46b9905896b7336f6ca60e238ff67.jpg" height="820px">
  </div>
  <div id="overlaid_video">
    <div class="container">
      <video id="video" width="256" autoplay muted>
        <source src="https://media.gettyimages.com/videos/reptile-video-id473277749" type="video/mp4" />
    </video>
    </div>
  </div>
</div>
</body>

#container {
    margin-left: 200px;
    position: relative;
}

#background_image,
#overlaid_video {
  position: absolute;
  left: 0;
}

#overlaid_video {
  z-index: 10;
  margin-top: 65px;
  margin-left: 152px;
}


#overlaid_video:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5%;
  height: 95%;
  backdrop-filter: blur(5px);
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5%;
  height: 95%;
  backdrop-filter: blur(5px);
}

#overlaid_video:after {
  content:"";
  position: absolute;
  top: 0;
  left: 2%;
  width: 96%;
  height: 5%;
  backdrop-filter: blur(5px);
}

.container:after {
  content:"";
  position: absolute;
  bottom: 3%;
  left: 2%;
  width: 96%;
  height: 5%;
  backdrop-filter: blur(5px);
}

【讨论】：

【解决方案2】：

您可以使用box-shadow来模糊图像的边框。

#video {
  box-shadow: green 0px 0px 25px 10px;
}

【讨论】：

这会添加阴影，但不会模糊视频。