时间戳

首页 > 解决方案 > 如何使用 CSS 模糊覆盖在图像顶部的视频边缘？

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

问题描述

我目前在图像上覆盖了一个视频。我想模糊视频的边界，使其柔和地融入下面的底层图像。有没有办法让我用 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>

标签： htmlcssfrontendweb-frontend

解决方案

这是一种残酷的方式，但我猜总比没有好。我也很确定 yoo 可以使用 剪辑路径做同样的事情，它可以大大减少 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);
}

推荐阅读