如何使用 CSS 模糊叠加在图像上的视频边缘？

Question

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

这是 JS fiddle：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>

Answer 1

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

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

Answer 2

这是一种残酷的方式，但我想总比没有好。我也很确定 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);
}

如何使用 CSS 模糊叠加在图像上的视频边缘？

How to use CSS to blur video edges overlayed on top of an image?

html

css

frontend

web-frontend